JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="left">
        <img src="home.jpg" alt="Picture of kid">
        <img src="catering.jpg" alt="Picture of kid">
    </div>
    <div class="middle">
        <h2 class="bspace"> Some Text </h2>
        <p> Sample </p>
        <p> Sample </p>
        <p> Sample </p>
        <p> Sample </p>
    </div>
</div>

CSS

.container {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 70vh;
    width: 70%;
    margin: 5% auto 8% auto;
    background-color: lightyellow;
}

.container p {
    margin-bottom: 2%;
}

.container h2 {
    color: orange;
    font-size: 34px;
}

.middle p:first-child {
    margin-top: 8%;
}

.bspace {
    /* margin-bottom: 50px; */
    margin-bottom: auto; /* new */
}

.box h2 {
    color: orange;
    text-align: center;
}

.left {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    width: 30%;
    border: 1px dashed red;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    width: 45%;
    /* height: 100%; */
    border: 1px dashed green;
}