How to make divs start from the point the tallest div started-CodePudding

I have 3 divs which have different heights. the shorter and medium divs do not start from the point the taller div starts and rather stick to the point where the taller div ended

How can I make them start from the same point and not end in the same point?

.tall {
  background-color: blue;
  width: 100px;
  height: 200px;
  display: inline-block;
}
.medium {
  background-color: green;
  width: 100px;
  height: 150px;
  display: inline-block;
}
.short {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
}

<div ></div>
<div ></div>
<div ></div>

CodePudding user response：

Add vertical-align: top; to your divs.

I have created a JSFiddle example so you can see it work: https://jsfiddle.net/w8ejb2xr/

You can also read more about vertical-align here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

CodePudding user response：

So I'm assuming here that you want them to all "snap" to the top so to speak.

The easiest way to accomplish this is to wrap your 3 divs in a container div. From there, we make the container div a flexbox and justify-content to flex-start that way it's at the "top" of the flex area. Doing this gives the desired effect of all the boxes staying at the top but lowering into the page by a different amount.

.tall {
  background-color: blue;
  width: 100px;
  height: 200px;
  display: inline-block;
}
.medium {
  background-color: green;
  width: 100px;
  height: 150px;
  display: inline-block;
}
.short {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
}
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>