JSFiddle - React, Tailwind, and code Playground

by Thomas Kirby

HTML

<div class="wrapper">
	
<div class="formbox">
  <div class="row">
    <div class="label">Label:</div>
    <div class="icons">XX</div>
    <div class="input">really long wide content really long wide content</div>
  </div>
  <div class="row">
    <div class="label">Label:</div>
    <div class="icons">XX</div>
    <div class="input">really long wide content really long wide content</div>
  </div>
    <div class="row">
    <div class="label">Label:</div>
    <div class="icons">XX</div>
    <div class="input">really long wide content really long wide content</div>
  </div>
    <div class="row">
    <div class="label">Label:</div>
    <div class="icons">XX</div>
    <div class="input">really long wide content really long wide content</div>
  </div>
</div>
</div>

CSS

.wrapper { xwidth:480px; border:1px solid violet; }
.formbox { display: inline-block; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; background: #FFFFFF; border:1px solid black; }
.row { display: block; border: 1px solid #ccc; margin:3px; padding:4px; clear:both; position:relative; }
.label { float:left; display:inline-block; width:120px; text-align:right; padding-right:4px; border:1px solid red; }
.icons { float:right; width:40px; border:1px solid red; text-align:center;  }
.input { display:inline-block; border: 1px solid green; }