positioning two sibling elements to be at same top without using position absolute(2)

Question

I asked a similar question with the same heading and received two solutions, but both of them have some irregularity. I would like two siblings elements to be at same top position without using position absolute since it does not affect other elements below it which directly depend on the two to be positioned in the page

1. Solution 'display:inline;'. This solution seemed what I have been looking for but if the first element has block children and grand children, then the second element is pushed down vertically. What I would like is that both elements are on same top position. Here is the code with that solution.

#parent {
    border: 1px solid black;
    background: #efefef;
} /*To indicate the parent*/
#child1 {
    background: green;
    position: relative;
    width: 60%;
    min-height: 30px;
}
#child2 {
    background: rgb(9,9,9);
    position: relative;
    width: 30%;
    height: 50px;
    color: white;
}
.aligned {
   display:inline-block;
}

<div id = "parent">
  <div id = "child1" class="aligned">
  <div>This is child one</div>
  <div>This is child one</div>
  <div>This is child one</div>
    </div>
  <div id = "child2" class="aligned">This is child two</div>
</div>
<div id = "two">
  This is a follow up element.
 </div>

2. solution 'float:left' For this method both elements are at the same top position but all element below the parent is displaced and not in the position it should be. Also the parent has no height ie it is as if the children are positioned absolutely,

#parent {
    border: 1px solid black;
    background: #efefef;
} /*To indicate the parent*/
#child1 {
    background: green;
    position: relative;
    width: 60%;
    min-height: 30px;
}
#child2 {
    background: rgb(9,9,9);
    position: relative;
    width: 30%;
    height: 50px;
    color: white;
}
.aligned {
    float:left;
}

<div id = "parent">
  <div id = "child1" class="aligned">
  <div>This is child one</div>
  <div>This is child one</div>
  <div>This is child one</div>
    </div>
  <div id = "child2" class="aligned">This is child two</div>
</div>
<div id = "two">
  This is a follow up element.
 </div>

thanks in advance.

Answer 1

Solution #1. The solution is to use vertical-align: top; with your inline elements:

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

Check the demo.

#parent {
  border: 1px solid black;
  background: #efefef;
}
/*To indicate the parent*/

#child1 {
  background: green;
  position: relative;
  width: 60%;
  min-height: 30px;
}
#child2 {
  background: rgb(9, 9, 9);
  position: relative;
  width: 30%;
  height: 50px;
  color: white;
}
.aligned {
  display: inline-block;
  vertical-align: top;
}

<div id="parent">
  <div id="child1" class="aligned">
    <div>This is child one</div>
    <div>This is child one</div>
    <div>This is child one</div>
  </div>
  <div id="child2" class="aligned">This is child two</div>
</div>
<div id="two">
  This is a follow up element.
</div>

Solution #2. Regarding your floats problem, it's also quite simple. You just need to "clear" floats if you use them. There are multiple technics to do it, one of them being adding overflow: auto; to the parent container.

#parent {
  border: 1px solid black;
  background: #efefef;
  overflow: auto;
}
/*To indicate the parent*/

#child1 {
  background: green;
  position: relative;
  width: 60%;
  min-height: 30px;
}
#child2 {
  background: rgb(9, 9, 9);
  position: relative;
  width: 30%;
  height: 50px;
  color: white;
}
.aligned {
  float: left;
}

<div id="parent">
  <div id="child1" class="aligned">
    <div>This is child one</div>
    <div>This is child one</div>
    <div>This is child one</div>
  </div>
  <div id="child2" class="aligned">This is child two</div>
</div>
<div id="two">
  This is a follow up element.
</div>