JSFiddle - React, Tailwind, and code Playground

by karlovac

HTML

<div id="container">
    <div class="box1">text is longer</div>
    <div class="box3">blerchy blerch</div>

    <div class="box2">some also long</div>
</div>

CSS

#container {
    border: 2px dashed #444;
    height: 125px;
    
    
    /* just for demo */
    width: 500px;
}


.box1 {
    float: left;
}
.box3 {
    float: right;
}
.box2 {
    margin: 0 auto;
}


.box1, .box3 {
    background: #ccc
}
.box2, .box4 {
    background: #0ff
}