JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
	<div>
        <h1>
            Element with a really, really, really loooooooooong title
        </h1>
    </div>
    <div>
        Element 2
    </div>
</div>

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-columns: repeat(2, calc(50% - 1rem)); */ /* Uncomment to see what happens */
    grid-gap: 1rem;
}

.grid > div {
    background: #f0f0f0;
    padding-bottom: 56.25%;
}

.grid > div h1 {
    white-space: nowrap;
}