JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.4/css/bulma.min.css">
<form class="form-horizontal" action="">
  <div class="field is-horizontal">
    <div class="field-body">
      <div class="field">
        <p class="control is-expanded">
          <label class="label">A very long label for a form</label> 
          <input type="text" name="" value="" class="input ">
         </p>
      </div> 
      <div class="field is-grouped">
        <p class="control is-expanded">
          <label class="label">Email</label>
          <input type="email" name="email" value="" class="input ">
        </p>
      </div>
    </div>
  </div>
  <div class="field is-horizontal">
    <div class="field-body">
      <div class="field">
        <p class="control is-expanded">
          <label class="label">Short Label</label> 
          <input type="text" name="" value="" class="input ">
         </p>
      </div> 
      <div class="field is-grouped">
        <p class="control is-expanded">
          <label class="label">Email</label>
          <input type="email" name="email" value="" class="input ">
        </p>
      </div>
    </div>
  </div>
</form>

CSS

label.label {
  font-size:20px;
}

form {
  padding: 20px;
}