JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email and other some many texts and some one else and else and else and else</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email"/>
    </div>
  </div>

  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10 centering">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password"/>
    </div>
  </div>


</form>

CSS

.form-group {border:1px dotted #333;}
.form-group > label, .form-group > div {
    display:inline-block;
    vertical-align: middle;
    max-width:50%;
}