How to align 2 div horizontally that are both inside of 2 parents (1 common parent and 1 unique)?

Question

A picture = 1000 words so let me show you what I mean:

Example Image

Div 1 is the common parent which is the container, Divs 2 are the unique parents which are columns and Divs 3 are the 2 children that I want to align horizontally. Their size is dynamic and none of them have a fixed height, but if one of them is higher than the other I want both of them to be displayed with the same height.

I have used flexbox to align Divs 2 horizontally already and even if their size , here is how the HTML and CSS look for now:

HTML

<div id="div1">
  <div id="div2">Text div 2
    <div id="div3">Text div 3</div>
  </div>
  <div id="div">Text div 2
    <div id="div3">Text div 3</div>
  </div>
</div>

CSS

#div1 {
  display:flex;
  flex-direction: row;
}

#div2 {
  border: 1px dotted black;
  border-radius: 20px;
}

Could you help me to align Divs 3 horizontally and make them appear as same height please?

Thanks a lot!

aligning *flex items* in adjacent flexboxes is not possible... see [here](https://stackoverflow.com/questions/55272962/alignment-of-content-vertically-in-adjacent-flexbox-containers/55291645#55291645) for a similar issue... — kukkuz, Apr 22 '19 at 08:28

ashish singh · Answer 1 · 2019-04-22T08:30:55.553

0

you can use align-items:stretch on parent to achieve this

#div1 {

  display:inline-flex;
  border: 2px solid red;
}


#div3 {
  width: 200px;
  border: 2px solid lime;
}

#div3-2 {
  width: 200px;
  border: 2px solid lime;
}


#div,
#div2 {
  border: 2px solid blue;
  margin: 10px;
  padding: 10px;
  display: flex;
}

<div id="div1">

  <div id="div2">
    <div id="div3">Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text xt di</div>
  </div>

  <div id="div">
    <div id="div3-2">Text div 3 Text di</div>
  </div>

</div>

edited Apr 22 '19 at 08:30

answered Apr 22 '19 at 08:03

ashish singh

6,526
2
15
35

Thanks but if you run the snippet you will notice that Divs3 aren't the same size dynamically. – Geniteur Cosmique Apr 22 '19 at 08:08
in the image you have posted .. dont you want green boxes ( div 3) to be of different sizes ? – ashish singh Apr 22 '19 at 08:16
No, sorry I must have explained badly. The problem is that they have different sizes and the size is dynamic according to the text inside. I want both of them to be at the same size even if they have different sizes by default. – Geniteur Cosmique Apr 22 '19 at 08:19
i have added some text instead of fixed height, does this makes sense ? – ashish singh Apr 22 '19 at 08:25
Thanks. The height of both div 3 are not equal though which is what I am looking for. – Geniteur Cosmique Apr 22 '19 at 08:27
Thanks a lot for your help Ashish. This works in your snipet but this is only a simplified version of my code and doesn't work for me. I don't have enough reputation to contact you. – Geniteur Cosmique Apr 22 '19 at 08:44

score -1 · Answer 2 · answered Apr 22 '19 at 08:13

please try this code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>test template</title>
    <!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <style>
          #div1 {

            display:inline-flex;
            flex-direction: row;
            align-items: stretch;
            border: 2px solid red;
          }


          #div3 {
            width: 100px; 
            border: 2px solid lime;
          }

          #div3-2 {
            width: 100px;
            border: 2px solid lime;
          }


          #div,
          #div2 {
            border: 2px solid blue;
            margin: 10px;
            padding: 10px;
          }

        </style>


</head>

<body>

  <div id="div1">

    <div id="div2">Text div 2
      <div id="div3">Text div 3</div>
    </div>

    <div id="div">Text div 2
      <div id="div3-2">Text div 3 lorem ipsum afda adsfa sdfa fdsa fdafdsa fda sdfa fd</div>
    </div>

  </div>
</body>

</html>

Thank you. As long as both Div3 have a fixed height it will work but if I want them to have no fixed size, it doesn't work. — Geniteur Cosmique, Apr 22 '19 at 08:21

How to align 2 div horizontally that are both inside of 2 parents (1 common parent and 1 unique)?

2 Answers2