Incorporating Bootstrap 4, I am designing a horizontal card layout for a classified ad. My goal is to have the ad title on the left and the price on the right within the header section using a Django template:
<section class="card">
<div class="row no-gutters">
<div class="col-sm-4">
<img src="{{ad.thumbnail.url}}" alt="" class="img fluid card-img ad-image-list">
</div>
<div class="col-sm-8">
<div class="card-body">
<header class="d-flex justify-content-between">
<h6>{{ad.title}}</h6>
<h6> {{ad.price}}$ </h6>
<hr>
</header>
<p class="card-text">{{ad.description}}</p>
</div>
</div>
</div>
</section>
The current output is shown here: https://i.sstatic.net/zgVZj.png
How can I properly apply
<header class"d-flex justify-content-between">