JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ui">
<div class="form boxstyle">
<ul>
<li><label>Website Name</label><input type="text"/></li>
<li><label>Website Subtitle</label><input type="text"/></li>
<li><label>Website Description</label><textarea></textarea></li>
</ul>
</div>
</div>
CSS
.ui .form.boxstyle ul {
border:1px solid #DDD; border-radius:10px; background:#FAFAFA; margin:10px 0 10px 0; box-shadow:inset 0 0 10px rgba(100,100,100,0.1); display:block; position:relative; clear:both; overflow: hidden;
}
.ui .form.boxstyle li {
border-bottom:1px solid #DDD; min-height:32px; display:block; clear:both; position:relative;
}
.ui .form.boxstyle li:last-child {
border-bottom:0px;
}
.ui .form.boxstyle li label {
width:35%; text-indent:20px; display:block; line-height:32px; font-size:13px; color:#555; float:left;
}
.ui .form.boxstyle li input, .ui .form.boxstyle li textarea {
width:-webkit-calc(65% - 90px); width:-moz-calc(65% - 90px); text-indent:10px; display:block; line-height:18px; font-size:13px; color:#555; padding:7px; border:0px; -webkit-appearance:textarea !important; -moz-appearance:textfield; appearance:textarea; margin:0 12px 0 0; float:right; height:18px; outline:none;
}