JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <h1>My form</h1>

<p>How to make these input fields small and retain the layout.</p>


<form role="form">
  <div class="form-group row">
    <div class="col-xs-6">
        <label for="code">Short field</label>
        <input type="text" class="form-control"/>
      </div>
  </div>

  <div class="form-group row">
    <div class="col-xs-6">
        <label for="code">Short field</label>
        <input type="text" class="form-control"/>
    </div>
  </div>
    
  <div class="form-group row">
    <div class="col-xs-12">
        <label for="code">Full width</label>
        <input type="text" class="form-control"/>
    </div>      
  </div>
  <div class="form-group row">
    <div class="col-xs-12">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>


</div>