JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="child">
        <img src="dog1.jpg" alt="Picture of a dog" width="250" height="250">
        <div class="childschild">
            some text is going here
        </div>
        </div>

    <div class="child">dfd</div>
    <div class="child">dfd</div>
        </div>

CSS

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    height: 200px;
    margin: 0 auto;
    width: 90%;
    border: 1px solid red;
}

.child {
    position: relative;
    width: 100px;
    height: 100px;
    border: 5px solid orange;
}

.childschild {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 1px dashed red;
}