Question: I have a `parent` div and two divs inside, one div is `floated left` and another div is `floated right`.

That is what I've got now:

```
┌─────────────┬─────────────┐
│  Text left  │ Text right  │
│  Text left  │─────────────┘
│  Text left  │             
│  Text left  │  
└─────────────┘

```

That is what I want:

```
┌─────────────┬─────────────┐
│  Text left  │             │
│  Text left  │             │
│  Text left  │             │ 
│  Text left  │ Text right  │ 
└─────────────┴─────────────┘

```

That is my html:

```
<div style="position:absolute">
    <div style="float:left">
        Text left
        Text left
        Text left
        Text left
    </div>
    <div style="float:right;">
        Text right
    </div>
</div> 

```

Basically I want `Text right` displayed in the bottom of the div.
What is the best way of doing that?

Answer: 
**Flexbox** can do that.

The first thing to do is equalise the heights of the two children and flexbox does that **out of the box**.

Then it's matter of setting the children to display in a column and using `justify-content` to send the content of the right-hand child to the bottom.

```css
.left,
.right {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  padding: 1em 1em 0 1em
}

.parent {
  display: flex;
}

.right {
  justify-content: flex-end;
}
```

```html
<div class="parent">
  <div class="left">
    <p>Text left</p>
    <p>Text left</p>
    <p>Text left</p>
    <p>Text left</p>
  </div>
  <div class="right">
    <p>Text left</p>
  </div>
```
Various option to solve this issue:

First, use "display: inline-block; vertical-align: bottom;" css property

Complete code:

```
<div style="position:absolute">
    <div style="display: inline-block; vertical-align: bottom;">
        Text left<br>
        Text left<br>
        Text left<br>
        Text left<br>
    </div>
    <div style="display: inline-block; vertical-align: bottom;">
        Text right
    </div>
</div> 

```