How to pull the latest news going to bottom of the first grid?

How to fix this? On the grid of my homepage, I want to pull the latest news going to bottom of the first grid. I use Bootstrap 3.


This is the code:

 <!--Latest News-->
      <div class= "row ">
      <div class="col-md-8 ">
         <div class="well">
            <div class="well well-sm" style="background-color:#00805e;  margin-top:.5em; padding: 5px 0 0 20px; width:100%;  border-radius:5px">
               <h4 style="text-align:center; margin:.5em ; background-color:#333; padding: 10px 18px; width:11em;  border-radius:5px">
                  <strong>LATEST NEWS</strong>
            <div class="card mb-4">
               <img src="SPB.jpg" class="img-responsive" alt="Cinque Terre" style= "width:100%; height:300px;"> 
               <div class="card-body">
                  <h2 class="card-title">Post Title</h2>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
                  <a href="#" class="btn btn-primary">Read More &rarr;</a>
               <div class="card-footer text-muted">
                  Posted on January 1, 2017 by
                  <a href="#">Start Bootstrap</a>