I have implemented flex from here
Whenever the content text increases in size, the div and the price do not remain aligned. See image here.
My goal is to achieve the following:
- Make sure the div maintains the same size whether the content text is long or short.
- Ensure that the price always stays aligned with the content even when it expands.
Link to JSFiddle: Here
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060150e110e13">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<style>
.border-gray {
border: 1px solid #000;
min-height: 100px;
padding: 20px;
}
</style>
<body>
<div class="container">
<div>
<h4>section name</h4>
</div>
<!-- <div class="menu-section row align-items-baseline menu-row"> -->
<div class="menu-section row align-items-baseline">
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border-gray">
<div class="d-flex justify-content-between bd-highlight mb-2">
<div class="p-2 bd-highlight">
title
<div>
t contentcontent contentcontent contentcontent contentcontent content content contentcontent contentcontent content
</div>
</div>
<div class="p-2 bd-highlight">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
</div>
<div class="d-flex align-content-end flex-wrap">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border-gray">
<div class="d-flex justify-content-between bd-highlight mb-2">
<div class="p-2 bd-highlight">
title
<div>
content t contentcontent contentcontent content t contentcontent contentcontentcontent t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent
contentcontent
</div>
</div>
<div class="p-2 bd-highlight">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
</div>
<div class="d-flex align-content-end flex-wrap">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
</div>
</div>
</body>