JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="modal fade bs-example-modal-lg" id="post-expand-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-vert-align-helper">
<div class="modal-dialog modal-lg modal-vert-align-center" role="document">
<div class="modal-content" style="border-radius: 0;">
<div class="modal-body">
<div class="row no-margin">
<div class="col-md-8 left" >
<center id="post-center" style="margin-top:0;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg/220px-Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg" id="full-img">
</center>
</div>
<div class="col-md-4 right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#post-expand-modal">
Launch Modal
</button>
CSS
.modal-body{
min-height: 270px;
}
.left{
}
.right{
height:650px;
border:2px solid blue
}
#post-center{
background:grey;
height:100%;
width:100%;
}
#full-img{
}