JSFiddle - React, Tailwind, and code Playground

by Santharam N R

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
  </head>

  <body>
   <div class="panel panel-default">
        <div class="panel-heading">
            Title
        </div>
        <div class="panel-body">
            <div class="row" style="dispay: block;" >
                <div class="col-sm-3">
                    <label>Header</label>
                </div>
                <div class="col-sm-9">
                    <h4><span class="label label-success">Success</span>
                    <span class="label label-info">Info</span>
                    <span class="label label-warning">Warning</span>
                    <span class="label label-danger">Danger</span></h4>
                </div>
            </div>
        </div>
    </div>
  </body>

</html>

CSS

.col-sm-3 { display: table; float:left;    height:40px;}
.col-sm-9 { display: table; float:left; }
.col-sm-3  > label , h4 > span { display: table-cell; vertical-align: middle; }