JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row page-header-box">
    <div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div>
    <div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator">
        <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div>
        <div class="page-header-alt"><small>Additional Text Description</small></div>
    </div>
</div>

CSS

.page-header-box {
    background-color:#3D3D3D;
    border-bottom:5px solid #b3b5b8;
    margin-bottom:10px;
}
.page-header-title { color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; }
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
.page-header-description { color:#febe10; }
.page-header-alt { margin-top:5px;color:#0093b2; }

JavaScript

var sep_height = '';
$(window).on("load resize", function(e) {
    var seperatorHeight = $('#header-seperator').height();
    if (seperatorHeight != sep_height) {
        sep_height = seperatorHeight;
        var titleHeight = $('#header-title').height();
        var difference = ((seperatorHeight - titleHeight) / 2) + 5;
        $('#header-title').css('margin-top', difference + 'px');
    }
});