HTML/CSS: How to position child element on top of another while keeping the space?

I have two elements with some text:

child1: 'one two three four'
child2: 'one two'

I want to put child2 on top of child1 like this.
I also want the parent element to take as much space as child1 (the bigger one).

So far I was able to accomplish only point 1 like this:

<!DOCTYPE html>
<html>

<head>
    <style>
        #parent {
            background-color: gray;
        }

        #child1 {
            position: fixed;
        }

        #child2 {
            position: sticky;
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <div id="parent">
            <span id="child1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam vulputate interdum non porta tortor. Quisque eu mattis dolor. Vestibulum tincidunt lobortis lobortis. Aliquam dignissim enim molestie massa facilisis sagittis. Aenean vel nibh sagittis, rhoncus tellus quis, commodo est. Cras convallis eu magna id dignissim. Quisque leo sem, suscipit vitae gravida at, dapibus et erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et tortor hendrerit, cursus risus non, viverra tellus. Aliquam laoreet erat risus, eu pulvinar tortor vulputate nec. Etiam velit ipsum, gravida eu iaculis ut, mollis vitae arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum consectetur neque, nec porta justo tincidunt vitae. Curabitur metus nisl, dictum ut turpis a, dignissim venenatis dolor.
            </span>
            <span id="child2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam
            </span>
        </div>
        <div id="nextElem">##############</div>
    </div>
</body>

</html>

How to make parent div take as much space as child1? Or take as much space as needed to fit all children? Is there a way to do that without specifying absolute size for the parent?

Solution

CSS-Grid can do that. No need for positioning at all.

#parent {
  background-color: lightblue;
  display: grid;
}

#child1 {
  grid-row: 1;
  grid-column: 1;
}

#child2 {
  grid-row: 1;
  grid-column: 1;
  color: red;
}

<div>
  <div id="parent">
    <span id="child1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam vulputate interdum non porta tortor. Quisque eu mattis dolor. Vestibulum tincidunt lobortis lobortis. Aliquam dignissim enim molestie massa facilisis sagittis. Aenean vel nibh sagittis, rhoncus tellus quis, commodo est. 
            </span>
    <span id="child2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam
            </span>
  </div>
  <div id="nextElem">Next Line</div>
</div>
</body>