JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1">
    <div class="x">
        <div class="left">a</div>
        <div class="left">a</div>
    </div>
    <div class="x">
        <div class="left">b</div>
        <div class="left">b</div>
    </div>
    <div class="x">
        <div class="left">c</div>
        <div class="left">c</div>
    </div>
    <div class="x">
        <div class="left">d</div>
        <div class="left">d</div>
    </div>
</div>

<div id="container2">
    <div class="y">
        <div class="left">d</div>
        <div class="left">d</div>
    </div>
    <div class="y">
        <div class="left">e</div>
        <div class="left">e</div>
    </div>
    <div class="y">
        <div class="left">f</div>
        <div class="left">f</div>
    </div>
</div>

CSS

#container1,#container2{
    border:1px solid #000;
    margin:20px;
    padding:10px;
}
.x {
    display:table-cell;
    width:33%;
}
.y {
    display:table-cell;
    width:50%;
}
.left {
    float:left;       
}