Prices are not aligned if I get a long description. See here: https://i.imgur.com/Etxj0p8.jpg
JSFiddle = 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<body>
<div >
<div >
<div itemscope="" itemtype="http://schema.org/MenuSection">
<div >
<h4>h4</h4>
</div>
<div >
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
<div >
<p>working good</p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
<div >
<p>working good</p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€4.50</p></span></span>
</div>
</div>
</div>
</div>
<div >
<h4>h4</h4>
</div>
<div >
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<p> desc 3</p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€8.00</p></span></span>
</div>
</div>
</div>
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. </p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<p> desc 3</p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus,
quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus
fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. </p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>CodePudding user response：
Just add align-items-baseline class to each row start.
.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 */
}<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<body>
<div >
<div >
<div itemscope="" itemtype="http://schema.org/MenuSection">
<div >
<h4>h4</h4>
</div>
<div >
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
<div >
<p>working good</p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
<div >
<p>working good</p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€4.50</p></span></span>
</div>
</div>
</div>
</div>
<div >
<h4>h4</h4>
</div>
<div >
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<p> desc 3</p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€8.00</p></span></span>
</div>
</div>
</div>
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. </p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<p> desc 3</p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
<div >
<div >
<div >
<p>p text</p>
</div>
<div >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus,
quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus
fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. </p>
</div>
<div >
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
If you don't want the text to disappear, you could just make the text box with a set height that's large enough to hold the longest text but I don't think that's what you want.
If the price being aligned is that important, you could change the location to the side of the text using flexbox or above the text so it doesn't matter how long the text is.