<div class="table">
<div class="cell left">
<div>Left as Tcell</div>
</div>
<div class="cell right">
<div>Right as Tcell</div>
</div>
</div>
<div class="flex">
<div class="left">Left with Flex</div>
<div class="right">Right with Flex</div>
</div>
.table {
display: table;
width: 100%;
margin-bottom: 2em
}
.cell {
display: table-cell;
}
.left {
background: #d00;
}
.right {
background: #0d0;
text-align: right /* only needed for the table version */
}
.cell div {
display: inline-block;
background: #aaa;
padding: 1em
}
.flex {
display: flex;
justify-content: space-between;
}
.flex div {
padding: 1em
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.