JSFiddle - React, Tailwind, and code Playground

HTML

<div class="branch">
  <a></a>
  <div class="row">
    <div class="branch"></div>
     <div class="branch">
     <a></a>
        <div class="row">
    <div class="branch"></div>
     <div class="branch"></div>
    </div>
    </div>
  </div>
</div>

CSS

.branch {
  border: 1px solid black;
  height: 100px;
  flex: 1;
  margin: 5px;
  float: left;
}

.row {
  border: 1px solid red;
  display: flex;
  margin: 5px;
  width: 200px;
  float: left;
}
a {
  border: 1px solid blue;
  height: 100px;
  margin: 5px;
  
}


.note
    {
        /*display: inline-block;
        position: absolute;*/
        width: 100px;
        height: 100px;
        
        border: 1px solid black;
        background-color: white;
        
        /*Lenny's Changes*/
        float: left;
        margin-left: -100px;
    }
    
    .pile
    {
        /*display: inline-block;
        position: absolute;
        padding: 4px;*/
        border: 1px solid red;
        
        /*Lenny's Changes*/
        float: left;
        padding: 10px; /*10px because the note fits nicely*/
        padding-left: 110px;
    }

/*The important bits
    
    To get the pile to wrap around the notes, it must "float: left". Don't know why, but it just must. The notes themselves must also have no positions - I have a feeling that this is because positioning overides how the parent places the children.

    To get the children to play nice with each other, they must also have "float: left". I imagine this is for a different reason to the pile enveloping everything, and again I'm not sure why.
    
    Each note is added to the pile and positions itself automagically next to the previous child. The combination of "margin-left: -100px" in the note and "padding-left: -110px" in the pile places each note in the same initial position within the pile (if the padding was 0, then the note would be at 0,0. Obviously with padding, p, the note is placed at 0+p,0+p).

    The moral of the story is: 130-odd revisions works!

    Hope I've helped. Any more interesting problems?
*/