JSFiddle - React, Tailwind, and code Playground

by alpacalips

HTML

<h1>Vertical Spacing</h1>

<div class="main">
  <div class="myLblAndVal">
    <div id="myLabels">
      <p>111 Labels... Haec disserens qua de re agatur
      et in quo causa consistat non videt...</p>
    </div>
    <div id="myValues">
      <p>222 Values... causas naturales et antecedentes, 
      idciro etiam nostrarum voluntatum...</p>
    </div>
  </div>

    <div id="myButton">
      <p>333 Button... nam nihil esset in nostra 
      potestate si res ita se haberet...</p>
    </div>
</div>

CSS

body * {margin:0;padding:0;}

    .main {width:600px;height:200px;border:solid red 2px;}

    .myLblAndVal { float:left;width:350px; }

    #myLabels {
    float:left;
    width: 150px;
    text-align:right;
    }

    #myValues {
    float:right;
    width: 150px;
    display:inline;
    }

    #myButton {
    float:right;
    width: 200px;
    margin-top:10px; /* Do I have to use an absolute value? */
    }