JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <p>The text that you'd wish to have vertically aligned in the middle of thecontainer...which might be like an article column, or whatever</p>
</div>
<br>
<div class="containerTwo">
    <p>this is more text that you might want to have vertically aligned in the middle with the others</p>
    <p>so here's a sibling paragraph you might want to have aligned next to the other.</p>
    <p>in order for this to really work you need to specify a width of them all though.  But if one is a really ridiculously out of proportion height in relation to the others, they all still line up perfectly</p>
</div>

<div class="containerThree">
    <p>this is more text that you might want to have vertically aligned in the middle with the others</p>
    <p>so here's a sibling paragraph you might want to have aligned next to the other.</p>
    <div title="a really big element!"></div>
    <p>in order for this to really work you need to specify a width of them all though.  But if one is a really ridiculously out of proportion height in relation to the others, they all still line up perfectly</p>
</div>

CSS

.container{
     border: 1px solid red;
    display:table-cell;
    position: relative;
    height: 300px;
    vertical-align:middle;
}

.containerTwo{
    border: 1px solid green;
    display:table-cell;
    height: 400px;
    vertical-align:middle;
}

.container p{
    border: 1px solid blue;
}

.containerTwo p{
    border: 1px solid blue;
    display:inline-block;
    vertical-align:middle;
    width: 30%;
}

.containerThree{
    border: 1px solid purple;
}

.containerThree p, .containerThree div{
    border: 1px solid blue;
    display: inline-block;
    vertical-align: middle;
    width: 20%;
}

.containerThree div{
    background-color: yellow;
    height:400px;
}