JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grandParent">
    <div id="parent">
        <div class="children"></div>
        <div class="children"></div>
        <div class="children"></div>
    </div>
</div>

<div id="reference"></div>

CSS

* {
    box-sizing: border-box;
}

#grandParent {
    width: 34px;
    height: 34px;
}

#parent {
    padding: 30px 5px;
}

.children {
    background: black;
    height: 3px;
    width: 100%;
    margin-bottom: 6px;
}

#reference {
    background-color: orange;
    width: 34px;
    height: 34px;
}