JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-11">
      <form>


        <div class="form-row">
          <div class="collapse col-12" id="myCollapse1">


            <div class="col-6 bg-primary">
              <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" value="John">
              </div>
              <div class="form-group">
                <label>Surename</label>
                <input type="text" class="form-control" value="Joseph">
              </div>
            </div>
            <div class="col-6 bg-warning">
              <div class="form-group">
                <label>Email</label>
                <input type="text" class="form-control" value="John@site.com">
              </div>
              <div class="form-group">
                <label>password</label>
                <input type="text" class="form-control" value="jj123">
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="col-1">
      <button class="btn btn-primary" data-toggle="collapse" data-target="#myCollapse1" aria-expanded="false">Collapse</button>

    </div>
  </div>
</div>