Flex bootstrap 5.1.3 div and price not alligned-CodePudding

I am using flex = https://getbootstrap.com/docs/4.0/utilities/flex/

if my content text increase size the div and the price do not stay aligned. https://i.imgur.com/7HXPMCi.jpg

what I am trying to archive =

div to have the same size when the content text is big or short.
price always be aligned with the other one if the content text increases.

JSFiddle = https://jsfiddle.net/scbxef5y/

<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
    <div>
        <h4>section name</h4>
    </div>
    <!-- <div > -->
    <div >
        <div >
            <div >
                <div >
                    <div >
                        title
                        <div>
                            t contentcontent contentcontent contentcontent contentcontent content content contentcontent contentcontent content
                        </div>
                    </div>

                    <div >
                        <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
                    </div>
                </div>

                <div >
                    <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    <div >
                        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 >
                        <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
                    </div>
                </div>

                <div >
                    <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

CodePudding user response：

The way I would approach this is to look at your two divs. Find the one with the most amount of content that is causing alignment issues. Then set a min-height on the smaller div based on the rendered size of the largest one.

So with your structure, the div on the right is rendered larger than the left one. The difference in the amount of content causes both border-gray and its first child with the flex to have different heights. So then, we need to set min-heights on the div with less content so that it fills the available space and aligns your content. This also includes setting a max-height on the div with lots of content (mostly for when resizing the browser and content wraps).

This should work with any varying-sized content as long as you follow this approach. It mostly relies on finding that min-height sweet spot. See the min-height I set on border-gray and the inline styles I set on its first child.

.border-gray {
  border: 1px solid #000;
  padding: 20px;
  min-height: 300px;
}

<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>
      <h4>section name</h4>
    </div>
    <!-- <div > -->
    <div >
      <div >
        <div >
          <div  style="min-height: 300px;">
            <div >
              title
              <div>
                t contentcontent contentcontent contentcontent contentcontent content content contentcontent contentcontent content
              </div>
            </div>

            <div >
              <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
            </div>
          </div>

          <div >
            <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div  style="min-height: 300px; max-height: 300px;">
            <div >
              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 >
              <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
            </div>
          </div>

          <div >
            <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

Have you tried to give height to one of the elements? then give height:auto; to the other one. also this code needs to be writen better, with that i mean to be more simplier, that way you can can see issues easier!