JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big">
    <div class="small">
        <div id="one"></div>
    </div>
    <div style"overflow: scroll;"class="small">
        2 horseshoes in a crib
    </div>
    <div class="small">
        3
    </div>
    <div class="small">
        4
    </div>
</div>

CSS

div{
    outline:1px solid red;
}

.big{
    height:200px;
    width:200px;
    position:relative;
    left:50%;
    margin:30px 0 0 -100px;
    
}
.small{
    height:100px;
    width:100px;
    float:left;
    text-align:center;
    line-height:100px;
}
#one{
outline:3px solid red;
height:1px;
width:1px;
margin:50px 0 0 50px;
}