JSFiddle - React, Tailwind, and code Playground

HTML

<div class="module1">
    <div class="container left">
        <div class="icon"></div>
        <div class="text">123456</div>
    </div>
    <div class="container left">
        <div class="icon"></div>
        <div class="text">123</div>
    </div>
</div>
<div class="module2">
    <div class="container right">
        <div class="icon"></div>
        <div class="text">123456</div>
    </div>
     <div class="container right">
         <div class="icon"></div>
        <div class="text">123</div>
    </div>
</div>

CSS

.icon {
        width: 50px;
        height: 50px;
        background: blue;
    }
    .text {
        height: 50px;
        font-size: 40px;
        line-height: 50px;
        background: red;    
    }
    .left .icon { float: left; }
    .left .text {
        width: auto;
        overflow: auto;
    }
    .right .icon { float: right; }
    .right .text {
        width: auto;
        overflow: auto;
    }
    
    .module1, .module2 {
        position: absolute;
        top: 0;
        border: 4px solid black;
    }
    .module1 { left: 0; }
    .module2 { right: 0; }
    .container { margin: 4px; }