When I have a long description, the prices appear misaligned. You can take a look at it here: https://i.sstatic.net/aXgaj.jpg
For the JSFiddle example, visit: https://jsfiddle.net/2n19tv75/
.border-gray {
border: 1px solid #e5e7eb;
float: left;
width: 100%;
min-height: 185px;
display: inline-block;
width: 100%;
height: 100%;
padding: 20px;
}
.menu-item-name {
float: left;
width: 60%;
font-weight: 600;
border: 1px solid blue;
}
.menu-item-price {
width: 100%;
float: right;
font-weight: 700;
text-align: left;
border: 1px solid red;
}
.menu-item-desc {
float: left;
color: #889194;
width: 60%;
border: 1px solid green;
display: inline-block;
min-height: 80px;
}
.menu-item-image {
float: right;
}
.menu-sectionname {
margin-top: 50px;
}
.menu-row {
--bs-gutter-x: 2rem !important;
/* control column gap */
--bs-gutter-y: 2rem !important;
/* control row gap */
}<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e2f9e6f9e4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<div class="menu">
<div itemscope="" itemtype="http://schema.org/MenuSection">
<div class="menu-sectionname">
<h4>h4</h4>
</div>
<div class="menu-section row menu-row">
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border-gray">
<div class="menu-item-name">
<p>p text</p>
</div>
<div class="menu-item-image">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
<div class="menu-item-desc">
<p>working good</p>
</div>
<div class="menu-item-price">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
[Additional content omitted for brevity]
</div>
</div>
</div>
</div>
</body>