JSFiddle - React, Tailwind, and code Playground

HTML

<div> 
       <span class='top1'>
            f1432
            <br>142344324324323432
<br>153454
<br>1534534
       </span>
       
       <span class='top2'>
e2
<br>fwefew4332
       </span>
       
       <span class='bottom'>
fwefwef
<br>h;k;lk;432432
       </span>
      </div>

CSS

.top1 { 
       background-color: #fefa8f;
       margin:10px;
       border:1px solid black;
       padding:10px;
       width:auto;
       height:auto;
       display: inline-block;
       vertical-align:top;
       }
        
.top2 {
       background-color: #fefa8f;
       margin-top: 10px;
       margin-bottom:10px;
       margin-left: -.36em;
       margin-right:10px;
       border:1px solid black;
       padding:10px;
       width:auto;
       height:auto;
       display: inline-block;
       vertical-align:top;
       }
                  
.bottom {
         background-color: #fefa8f;
         margin-top: 10px;
         margin-bottom:10px;
         margin-left: -.36em;
         margin-right:10px;
         border:1px solid black;
         padding:10px;
         width:auto;
         height:auto;
         display: inline-block;
         vertical-align:bottom;
         }   

div      {
          width:auto;
          height:auto; 
          margin:10px;
          background-color:#d7e1fd;
          }