Hey there, I'm currently working on a web application using Bootstrap and running into an issue with the grid system. Whenever I add elements to a column, all the columns in the same row stretch together, which is not the desired behavior. Take a look at the image below for reference: https://i.sstatic.net/60KFk.png
As you can see, adding "Line1", "Line2", and "Line3" causes all containers in the same row to stretch. I only want the container labeled "Something" to increase in height vertically.
Here is my current code:
<SideNav>
</SideNav>
<div className='container-md mt-5'>
<div className='row text-center'>
<h4 className='mb-5'>"The body achieves what the mind believes" - Alek Barns</h4>
<div className='col-md-3 shadow p-3 mb-5 bg-white rounded display-6'>Metric</div>
<div className='col-md-1'></div>
<div className='col-md-3 shadow p-3 mb-5 bg-white rounded display-6'>Goal</div>
<div className='col-md-1'></div>
<div className='col-md-4 shadow p-3 mb-5 bg-white rounded display-6'>Something
<h4>Line 1</h4>
<h4>Line 2</h4>
<h4>Line 3</h4>
</div>
</div>
<div className='row text-center'>
<div class='col-md-8 shadow p-3 mb-5 bg-white rounded display-6'>
<h2>Today's Workout: HIT Training</h2>
<img src="https://media.flowin.com/blog/blog_654350014.jpg" class="img-fluid"></img>
</div>
<div class='col-md-2'></div>
<div class='col-md-2 shadow p-3 mb-5 bg-white rounded display-6'>
<h2>Friend Zone </h2>
<h5>Most Workouts</h5>
<h6>1. Kaasim - 12 Completed</h6>
<h6>2. Bryan - 10 Completed</h6>
<h6>3. Mo - 9 Completed</h6>
<h6>4. Jung - 8 Completed</h6>
<h6>5. Chris - 7 Completed</h6>
<h6>6. Anna - 7 Completed</h6>
</div>
</div>
</div>
</body>