JSFiddle - React, Tailwind, and code Playground

HTML

<body style='margin:0; width:100%; height:100%; background-color:#e8e7e7'>
<body>
    <div id='holder'>
        <div id='blackout'></div>
        <div id='data_holder'>
            <div id='geo'> <button>Click for problem</button></div>
            <div id='dis_valign'></div>
            <div id='dis_noalign'></div>
            <div id='dis_valign'></div>
            <div id='dis_valign'></div>
        </div>
    </div>
</body>

CSS

html{
width:100%; height:100%
}
body {
    margin:0;
    width:100%;
    height:100%;
    background-color:#e8e7e7
}
#holder {
    width:100%;
    height:100%;
    margin:0
}
#blackout {
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0.5;
    position:absolute;
    z-index:1
}
#data_holder {
    width:100%;
    height:100%;
    z-index:2;
    position:relative;
    text-align:center
}
#geo {
    width:96.9%;
    height:40%;
    background-color:#9F6;
    display:inline-block;
    vertical-align:middle
}
#dis_valign {
    width:24%; 
  height:25%; 
  background-color:#9F6; 
  display:inline-block; 
  vertical-align:middle    

}
#dis_noalign {
    width:24%;
    height:25%;
    background-color:#9F6;
    display:inline-block;
}

JavaScript

$("button").click(function(){
  $('#dis_noalign').css('vertical-align','middle');
    alert('Changed dis_noalign vertical-align property to middle, now nothing gets aligned.');
});