JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<section id="someSection" class="section">
  <div class="container d-flex flex-column justify-content-between fHeight mh100vh">
    <div class="row">
      <div class="col-md-8 offset-2">
        <h2 class="section-title">Header Text</h2>
        <p class="section-subtitle">
          Some Text
        </p>
      </div>
    </div>
    <div class="row d-flex fHeight">
      <div class="col-md-4">
        <img class="btmImg" src="https://i.stack.imgur.com/V5BcV.png" alt="" />
      </div>
      <div class="col-md-8">
        <img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
      </div>
    </div>
  </div>
</section>

CSS

.section {
  display: flex;
}

.row.d-flex.fHeight {
  align-items: flex-end;
}

.mn120 {
  min-height: 120px;
}

img {
  max-width: 40%;
}

.mh100vh {
  min-height: 900px;
}


/*
.col-md-4 {
  margin-top:auto;
}
*/