JSFiddle - React, Tailwind, and code Playground

One/two col form with classes

by Ben Clayton

HTML

If the form editor had a selectable class for each field   center/left/right,   does this give you perhaps a solution for forms?


<div class="full"><div class='label'>Forename</div><input /></div>
<div class="full"><div class='label'>Surname</div><input /></div>
<div class="full"><div class='label'>email</div><input /></div>
<div class="left"><div class='label'>Address1</div><input /></div>
<div class="right"><div class='label'>Address2</div><input /></div>
<div class="left"><div class='label'>Town</div><input /></div>
<div class="right"><div class='label'>County</div><input /></div>
<div class="full"><div class='label'>Website</div><input /></div>

CSS

input {width:90%}



    .full {width:100%;clear:both;}
    .left {float:left;width:45%;margin-right:4.5%;}
    .right {float:left;width:45%;margin-right:4%;}

@media screen and (max-width: 720px){
    .full {width:100%;clear:both;}
    .left {width:100%;clear:both;}
    .right {width:100%;clear:both;}
}