Header Information / Action alignements
HTML
<div class="header">
<div class="information">
<div>
Label<span>02/10/1970</span>Label<span>Adresse 1 rue trois 75009 PARIS FRANCE</span>Label<span>whatever</span>
</div>
<div>
Label long<span>0.0</span>Label encore plus long<span>00.00</span>Label<span>1234</span></div>
<div>
Label long<span>0.0</span>Label encore plus long<span>00.00</span>Label<span>1234</span></div>
<div>
Label long<span>0.0</span>Label encore plus long<span>00.00</span>Label<span>1234</span></div>
<div>
Label long<span>0.0</span>Label encore plus long<span>00.00</span>Label<span>1234</span></div>
</div>
<div class="actions">
<div class="btn">action 1</div>
<div class="btn">action 2</div>
<div class="btn">action 3</div>
</div>
</div>
CSS
.header {
background: #efefef;
text-align: justify;
font-family: Arial;
overflow: hidden;
min-width: 376px;
/* IE special */
width: 100%;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.header:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
.information {
display: inline-block;
margin: 0.5em 0;
padding-top: 2px;
vertical-align: middle;
text-align: left;
color: #444350;
}
.actions {
display: inline-block;
vertical-align: baseline;
}
.information span{
font-weight: bold;
margin: 4px 26px 4px 10px;
display: inline-block;
color: #000;
}
.btn{
display: inline-block;
background-color: #9a9a9a;
padding: 10px 14px;
text-transform: uppercase;
color: #fff;
border-radius: 4px;
margin: 0 4px;
}
.btn:first-of-type{
margin-left: 0;
}
.btn:last-of-type{
margin-right: 0;
}