JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

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 flex-me">
            <div class="col-md-8">
              <div class="text-center gray-bg">
                <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">
              </div>
            </div>
            <div class="col-md-4">
              <div class="right"></div>
            </div>
          </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

.right {
  border: 2px solid blue;
  box-sizing: border-box;
  height: 100%;
}

.gray-bg {
  background: grey;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media(max-height: 991px) {
  .flex-me .gray-bg {
    min-height: 80vh;
  }
  .right{
    min-height: 100px
  }
}

@media (min-width: 992px) {
  .flex-me {
    display: flex;
  }
  .gray-bg {
    width: calc(100% + 15px);
  }
}