JSFiddle - React, Tailwind, and code Playground

by HerrSerker

HTML

<dl>
    <dt>first name</dt>
    <dd><input /></dd>
</dl>

CSS

dl {
    display: block;
    overflow:hidden;
    padding: 5px 15px 5px 20px;
    
}

/* the -15px in the margin is to compensate for the 5px in the margin and the 2 x 5px in the padding */
dt {
    float: left;
    width: 30%;
    margin: 0px 5px 0 -15px;
    padding: 5px;
    background: yellow;
}
/* the -10px in the margin is to compensate for the 2 x 5px in the padding */
dd {
    float: left;
    width: 70%;
    margin: 0px -10px 0 0px;
    padding: 5px;
    background: yellow;
}