JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outerwrapper">
  <div class="header">Header

      <div class="srch">
        <div class="thediv">
            <input type="text" val="Input" />
        </div>
      </div>
  </div>

  <div id="contentWrapper">
    Content Wrapper
  </div>  

</div>

CSS

.header{
    height: 120px;
    background-color:#999;    
}
input {
    border:solid thin #ab1; 
}
.srch{
    height: 50px;        
    background-color:#00f;
    border: 1px solid #fff;
}
.srch div{
    margin: 0 auto;
    width: 200px;
    background-color: #000;
}
#contentWrapper {
    width: 100%;
    overflow: auto;
    background-color:#0F0
}

JavaScript

$(function() {
// vertical align function
$.fn.vAlign = function() {
    return this.each(function(i){
        var ah = $(this).height();
        var ph = $(this).parent().height();        
        var mh = Math.ceil((ph-ah) / 2); //var mh = (ph - ah) / 2;
        $(this).css('margin-top', mh);
        console.log('11');
    });
};
    
$('.thediv').vAlign();

});