Vertical Alignment of two inline-block divs

Question

I have two divs inside of a parent div and both child divs are display: inline-block. I would like to make it so the first div on the left is vertical-align: top, while the second div is vertical-align: bottom, but I also want to restrict the second div so it's first line of text lines up with the last line of text of the first div and extends downward increasing the height of the parent div instead of upward. How might I accomplish this?

For example, if I have something like so:





 
Here is some text
 
 
Here is some other text

I want the first line of d2 to be in line with the last line of d1. So it would look something like this:

Here
is
some
text Here
     is
     some
     other
     text

user_13536893 · Answer

Here is one I used grid layout

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 55px 20px 55px;
  width: 65px;
}

#d2 {
  grid-row: 2;
  grid-column: 2;
}


  
    Here is some text
  
  
    Here is some other text

user_8620333 · Answer

vertical-align: text-top; on the second div can approximate this

#d1 {
  width: 50px;
  display: inline-block;
  vertical-align: 0.1em; /* rectify the alignment*/
}

#d2 {
  width: 50px;
  display: inline-block;
  vertical-align: text-top;
}


  
    Here is some text
  
  
    Here is some other text
  



  
    Here is some text
  
  
    Here is some other text

Another trick using float where you need an extra wrapper:

#d1 {
  width: 50px;
  display: inline-block;
  vertical-align: 0.1em;
}

#d2 {
  width: 50px;
  display: inline-block;
}

#d2:before {
  content: "";
  display: inline-block;
}

#d2>span {
  float: left;
}


  
    Here is some text
  
  
    Here is some other text
  



  
    Here is some text
  
  
    Here is some other text

Another idea in case the width are always known and fixed:

.container {
  border: 1px solid red;
  line-height:1.2em;
}

#d1 {
  width: 50px;
}

#d2 {
  width: 50px;
  margin-top: -1.1em;
  transform: translate(50px); /* the width of the first div */
}


  
    Here is some text
  
  
    Here is some other text
  



  
    Here is some text
  
  
    Here is some other text

Another one with CSS grid

.container {
  border: 1px solid red;
  line-height:1.2em;
  display:grid;
  grid-template-rows:auto 1.1em auto;
  justify-content:flex-start;
}
.container > * {
  width: 50px;
  grid-row-end:span 2;
}

#d2 {
  width: 50px;
  grid-column:2;
  grid-row-start:2;
}


  
    Here is some text
  
  
    Here is some other text
  



  
    Here is some text
  
  
    Here is some other text

In all the above solution you may need to adjust the em values based on the font used.

user_14016120 · Answer

Use JS

var d1Height = document.getElementById("d1").offsetHeight;

document.getElementById("d2").style.marginTop = d1Height-17 + "px";

#d1, #d2 {
    width:50px;
    display: inline-block;
}

#d1 { vertical-align:top; }





 
Here is some text
 
 
Here is some other text

Vertical Alignment of two inline-block divs

3 Answers