JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container container1">
    container1
    <div class="parent">
        parent
        <span class="child">
            child<br/>
            child
        </span>
    </div>
</div>
<div class="container container2">
    container2
    <div class="parent">
        parent
        <span class="child">
            child<br/>
            child
        </span>
    </div>
</div>
<div class="container container3">
    container3
    <div class="parent">
        parent
        <span class="child">
            child<br/>
            child<br/>
            child<br/>
            child<br/>
            child<br/>
            child<br/>
            child<br/>
            child<br/>
            child<br/>
        </span>
    </div>
</div>

<div class="container container4">
    container4
    <div class="parent">
        parent
        <span class="child">
            child<br/>
            child
        </span>
    </div>
</div>

CSS

.parent {
    border: 1px solid green;
    height: 50%;
}

.child {
    border: 1px solid red;
    vertical-align: bottom;
}

.container {
    border: 1px solid black;
    height: 150px;
    margin-bottom: 40px;
}

.container1 .parent, .container2 .parent {
    display: table;
}

.container1 .child, .container2 .child {
    display: table-cell;
}

.container2 {
    position: relative;
}

.container2 .parent {
    width: 100%;
}

.container2 .child {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

.container3 {
    position: relative;
//    overflow: hidden;
}

.container3 .parent {
//    position: relative;
    overflow: hidden;
}

.container3 .child {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.container4 .parent {
    position: relative;
}

.container4 .child {
    position: absolute;
    height: 100%;
}

JavaScript

/*

Questions
1) removing position: absolute from container2's child makes the text align to the bottom (as expected from vertical-align: bottom). why?
2) container3's  child,child,child span only gets clipped clipped by the first ancestor which has overflow:hidden AND position:something. why is position required?
3) container4's child does not stretch vertically unless position: absolute is set (position: relative will not do anything).
4) container4's child's height: 100% will use the first parent that has a position set. why not the first parent's content height?
5)container4's child has vertical-align: bottom set. But its text is not aligned to the bottom (unlike in container1 where parent has display: table and child has display: table-cell.

Answers
1)
2)
3)
4)
5)

*/