Building a Bootstrap 4 accordion, I encountered an issue. In the button header, I have two divs with one floating left and the other floating right. The right div contains an image, while the left div contains a title and a subtitle.
Everything works perfectly, except I want the left div to match the height of the right div and for the two titles to be vertically aligned.
Every time I try to adjust the CSS to achieve this, I end up breaking something else in the accordion. I've hit a wall and created a fiddle in the hopes that someone can assist me.
Here is the fiddle link: >> Fiddle <<
<div class="accordion" id="page-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" style="width:100%;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="left">
<h5 class="card-title">OCTOBER 2018</h5>
<h6 class="card-subtitle mb-2">TODAY IS THE DAY</h6>
</div>
<div class="right">
<img src="pic.png" width="209px" height="119">
</div>
<div class="clear"></div>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#page-accordion">
<div class="card-body">
<p class="card-text">DETAILS COMING SOON</p>
<a href="#" class="btn btn-danger">Click here for details</a>
</div>
</div>
</div>
</div>