JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapper'>
    <div class='elementContainer'>
        This line should start halfway down the yellow box
    </div>
</div>

CSS

.wrapper
{
    position: relative;
    
    height: 400px;
    width: 400px;
    
    background: lightyellow;
    border: 1px solid black;
}

.elementContainer
{
    position: relative;
    height: 200px;
    width: 300px;
    
    padding-top: 50%;
    
    background: red;
}