Layout with DIV element - html

Question

I have trouble to generate the following layout using DIV element, fighting with alignement and box style
Desire layout is here
Any help would be helpfull
regards

Answer 1

Try something like this
DEMO
.element {
margin: 50px;
box-sizing: border-box;
}
.remaining, .sold {
display: table;
border: 1px solid #999999;
padding: 10px;
width: 20%;
position: relative;
float: left;
height: 200px;
box-sizing: border-box;
}
.remaining {
border-right: none;
border-top: none;
}
.remaining:before {
position: absolute;
top: -30px;
height: 30px;
background: #FF7F7E;
content: "SHOES - STOCK";
border: 1px solid #999999;
color: white;
width: 100%;
left: 0;
line-height: 30px;
padding-left: 10px;
font-size: 13px;
font-weight: bold;
right: 0;
box-sizing: border-box;
}
.top, .center, .bottom {
display: table-row;
}
.top .inner {
display: table-cell;
width: 100%;
vertical-align: top;
}
.center {
display: table-cell;
width: 100%;
vertical-align: middle;
text-align: center;
}
.center span {
display: block;
}
.bottom .inner {
display: table-cell;
width: 100%;
vertical-align: bottom;
}
.inner-content {
display: table;
}
.top .inner span,
.bottom .inner span{
display: table-cell;
width: 100%;
}
.top .inner span:last-child,
.bottom .inner span:last-child {
text-align: right;
font-weight: bold;
width: 60px;
float: left;
}
.center span:first-child {
font-size: 70px;
font-weight: bold;
line-height: 1;
}
span u {
text-decoration: none;
border-bottom: 1px solid red;
}
#media(max-width: 1200px) {
.remaining, .sold {
display: table;
width: 30%;
height: 200px;
}
}
#media(max-width: 768px) {
.remaining, .sold {
display: table;
float: none;
width: 100%;
height: 200px;
}
.remaining {
border-right: 1px solid #999999;
border-bottom: none;
}
}
<div class="element">
<div class="remaining">
<div class="top">
<div class="inner">
<div class="inner-content">
<span>TOTAL</span>
<span>250 <u>pcs</u></span>
</div>
</div>
</div>
<div class="center">
<span>200</span>
<span>REMAINING</span>
</div>
<div class="bottom">
<div class="inner">
<div class="inner-content">
<span>USED</span>
<span>50 <u>pcs</u></span>
</div>
</div>
</div>
</div>
<div class="sold">
<div class="center">
<span>50</span>
<span>SOLD</span>
</div>
</div>
</div>