Question: I have three divs red, black and green. I want red div whose height is 45mm and next black div on its right whose height is 55mm and then green div just below the red div and green div height is 50mm.

I am using the code

```
<div style="height:45mm;width:30mm;border:1mm solid red;float:left;position:relative;">
</div>
<div style="height:55mm;width:20mm;border:1mm solid black;display: inline-block;">
</div>
<div style="height:50mm;width:20mm;border:1mm solid green;">
</div>

```

But I am getting the following result:

<https://i.stack.imgur.com/wSNpW.jpg>

What I desire is:

<https://i.stack.imgur.com/4d5wn.jpg>

Thanx

Answer: 
This uses a flexbox with direction of column, wrap, and tight constraints (height and width). I've used `order` to change the order of the elements, but you can just switch the order in the HTML.

```css
#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 35mm;
  height: 105mm;
}

#rect1 {
  height:45mm;
  width:30mm;
  border:1mm solid red;
}

#rect2 {
  order: 1;
  height:55mm;
  width:20mm;
  border:1mm solid black;
}

#rect3 {
  height:50mm;
  width:20mm;
  border:1mm solid green;
}
```

```html
<div id="container">
  <div id="rect1"></div>
  <div id="rect2"></div>
  <div id="rect3"></div>
</div>
```
My initial reaction was *use flexbox!* But I can't actually figure out how to do what you want with `display: flex`.

I can do what you want in this exact situation with `position: relative` on the third rectangle, but I'm not sure if that's the kind of solution you're looking for:

```css
#rect1 {
  height:45mm;
  width:30mm;
  border:1mm solid red;
  float:left;
  position:relative;
}

#rect2 {
  height:55mm;
  width:20mm;
  border:1mm solid black;
  display: inline-block;
}

#rect3 {
  position: relative;
  top: -11mm;
  height:50mm;
  width:20mm;
  border:1mm solid green;
}
```

```html
<div id="rect1"></div>
<div id="rect2"></div>
<div id="rect3"></div>
```