'CSS DIV prices are not aligned if I get a long description
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 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>
<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>€4.50</p></span></span>
</div>
</div>
</div>
</div>
<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 border-gray-no-image">
<div class="border-gray">
<div class="menu-item-name">
<p>p text</p>
</div>
<div class="menu-item-desc">
<p> desc 3</p>
</div>
<div class="menu-item-price">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€8.00</p></span></span>
</div>
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
<div class="border-gray">
<div class="menu-item-name">
<p>p text</p>
</div>
<div class="menu-item-desc">
<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 class="menu-item-price">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
<div class="border-gray">
<div class="menu-item-name">
<p>p text</p>
</div>
<div class="menu-item-desc">
<p> desc 3</p>
</div>
<div class="menu-item-price">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
<div class="border-gray">
<div class="menu-item-name">
<p>p text</p>
</div>
<div class="menu-item-desc">
<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 class="menu-item-price">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>Solution 1:[1]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Kameron |