JSFiddle - React, Tailwind, and code Playground

by jmuheim

HTML

<div class="block">
      <dl>
        <dt>111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111</dt>
        <dd>111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111</dd>
        <dt>222</dt>
        <dd>222</dd>
        <dt>333</dt>
        <dd>333</dd>
        <dt>444<br />444</dt>
        <dd>444</dd>
        <dt>555</dt>
        <dd>555</dd>
        <dt>666<br />666</dt>
        <dd>666</dd>
      </dl>
    </div>

CSS

body {
    padding: 0;
    margin: 0;
}

.block {
    overflow: hidden;
    background-color: blue;
    margin: 20px 0;
}

dl {
    margin: 10px 0;
    background-color: yellow;
}

dt {
    margin: 0 0 4px 0;
    background-color: green;
    float: left;
    clear: left;
    width: 200px;
}

dd {
    margin: 0 0 4px 200px;
    background-color: red;
}