JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<div class="container">  
  <div class="content1 col-xs-12 col-md-6">
    A
  </div>     
  <div class="content3 col-xs-12 col-md-6">
    C
  </div>
  <div class="content2 col-xs-12 col-md-12">
    B
  </div>          
</div>

CSS

.content1{height:50vh !important;}