JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
    <dt id="dt2">    <label for="dd2">Dd2 Label:</label>    </dt>
    <dd id="dd2dd">  <input id="dd2" type="text">           </dd>
    
    <dt id="dt3">    <label for="dd3">Dd3 Label:</label>    </dt>
    <dd id="dd3dd">  <input id="dd3" type="text">           </dd>
    
    <dt id="dt4">    <label for="dd4">Dd4 Label:</label>    </dt>
    <dd id="dd4dd">  <input id="dd4" type="text">           </dd>
</dl>

CSS

dl {
    width: 350px;
    height: 100px;
    border: 1px solid red;
    
}


#dd0 {
    width: 100px;
    height: 80px;
    margin: 5px;
    
}

#dt0, #dt1 {
    display: none;
}

#dd0dd {
    float: left
}



#dt1, #dt2, #dt3, #dt4{  
    width:80px; 
    padding: 5px;
    float: left;
    
}
#dd2dd, #dd3dd, #dd4dd {
    width: 120px;
    padding: 5px;
    float: left;
}