JSFiddle - React, Tailwind, and code Playground

by cornelis

HTML

<form action="#">
	<fieldset class="horizontal">
		<label style="background:pink">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <input name="email" required="required" size="40" type="email"></label> 
		<label>Password <input data-minlength="8" id="password" name="password" required="required" type="password"></label> 
		<label>Repeat password <input data-equalto="#password" required="required" type="password"></label>
	</fieldset>
</form>

CSS

body {
	font: 14px/1.7 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 20px;
}

input {
	font: 1em/1.5 Verdana, "Lucida Grande", Lucida, sans-serif;
    max-width: 165%;
}

.horizontal label {
	position: relative;
	float: left;
	padding-right: 65%;
	width: 35%;
}

.horizontal label > * {
	position: relative;
	left: 100%;
	margin-right: -200%;
	float: left;
}



fieldset {
    /* Next line would patch the issue in recent webkit versions */
    /*  min-width: 0;  */
}