<div class="wrapper">
<div class="gold">
<strong>1</strong>
<br><br>
<code>order: 10;</code>
</div>
<div class="red">
<strong>2</strong>
<br><br>
<code>order: 5;</code>
</div>
<div class="blue">
<strong>3</strong>
<br><br>
<code>order: 0;</code>
</div>
</div>
* {
box-sizing: border-box;
}
.wrapper {
font-family: monospace;
color: #fff;
border: 2px solid #ddd;
display: flex;
padding: 16px;
justify-content: space-around;
}
.wrapper > div {
padding: 86px 0 76px 0;
font-weight: 700;
font-size: 2em;
text-align: center;
height: 75%;
width: 30%;
}
.wrapper > div > code {
font-size: .75em;
}
.gold {
background-color: gold;
order: 10;
}
.red {
background-color: red;
order: 5;
}
.blue {
background-color: steelblue;
order: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.