CSS relative positioning to parent and other children
<p>I have a problem with positioning my <code>&lt;div&gt;</code> elements. I have the following example: <a href="https://jsfiddle.net/5tv4pyh0/1/" rel="nofollow">https://jsfiddle.net/5tv4pyh0/1/</a></p>

<p>As you can see, the second child is positioned below the first one. What I want to achieve is to have the second child at the same top position as the first one as long as they do not overflow each other. If the second child would have <code>left: 30%</code> it should appear below the first child.</p>

<p>Using <code>position: absolute</code> for the children also doesn't work because both children can have a flexible height. I also tried to add <code>float: left</code> but then both children always appear next to each other regardless what I set to <code>left</code>.</p>

<p>Any suggestions how I can achieve the desired behavior?</p>

<p><strong>Edit:</strong></p>

<p>I'm trying to create a grid like positioning with only setting the x-position to the child elements. Then if the two children have the same x-position or the second child has a x-position that is within the width of the first child the second should appear below the first element. If the second child has a x-position next to the first child it should be positioned at the same y-position.</p>

<p>Thanks, Gerry</p>