Question: I want to have 2 `divs` inside another one but the with different `margin-top`, every time I try to set the `margin-top` of the first one the second one aligns according to the first one. Let's say that `first` and `second` are two `divs` inside another `div`. I would like something like this:

```
                 second

```

first

But I'm getting this:

this second

You can have a clearer idea maybe visiting [this](https://jsfiddle.net/55szha5g/) fiddle

Answer: 
Flexbox to the rescue!

```css
#wrapper {
  display: flex;
}

.divF {
  margin-top:20px;
}
/*Border added for demo so you can see what's happening*/
#wrapper { border: 1px solid #777; }
.divF, .divS { border: 1px solid #CCC; }
```

```html
<div id="wrapper">
  <div class="divF">
    <p>first</p>
  </div>
  <div class="divS">
    <a href=#>second</a>
  </div>
</div>
```
Try vertical-align: top; Check the code below.

```css
.divF{
  display:inline-block;
  margin-top:20px;
  vertical-align: top
}

.divS{
  display:inline-block;
  vertical-align: top
}
```

```html
<div>
<div class="divF">
<p>
first
</p>
</div>
<div class="divS">
<a href=#>second</a>
</div>
</div>
```