<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-direction: row;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: White;
padding: 10px;
flex: 10%;
border: 1px solid black;
text-align: center;
font-size: 10px;
font-family: 'Times New Roman', Times, serif;
}
.flex-item-center {
background-color: White;
padding: 10px;
flex: 60%;
border: 1px solid black;
border-left-style: none;
text-align: left;
font-size: 10px;
}
.flex-item-right {
background-color: White;
padding: 10px;
flex: 30%;
border: 1px solid black;
border-left-style: none;
text-align: left;
}
.flex-item-center-content {
background-color: White;
padding: 10px;
flex: 50%;
border: none;
border-left-style: none;
text-align: left;
font-size: 10px;
}
.flex-item-right-content {
background-color: White;
padding: 10px;
flex: 30%;
border: none;
border-left-style: none;
text-align: left;
font-size: 10px;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: row;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item-left">
<b>Thresold:</b><br>1233
</div>
<div class="flex-item-center">
<div class="flex-item-center-content">
<b>Info1:</b>
</div>
<div class="flex-item-center-content">
<b>Info2:</b>
</div>
<div class="flex-item-center-content">
<b>Info3:</b>
</div>
<div class="flex-item-center-content">
<b>Info4:</b>
</div>
<div class="flex-item-center-content">
<b>Info5:</b>
</div>
<div class="flex-item-center-content">
<b>Info6:</b>
</div>
<div class="flex-item-center-content">
<b>Info7:</b>
</div>
<div class="flex-item-center-content">
<b>Info8:</b>
</div>
<div class="flex-item-center-content">
<b>Info9:</b>
</div>
</div>
<div class="flex-item-right">
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
<div class="flex-item-right-content">
<b>Info1:</b>
</div>
</div>
</div>
</body>
</html>
