DONT ADD ANYTHING HERE!

1
2
3
4
5

Notes

div position top right bottom left
1 absolute 0 — — 0
2 absolute 0 — — 31%
3 absolute 40% — — 0
4 absolute 40% — — 31%
5 absolute 20% — — 62%

Code

HTML

    <div class="outer-container">
        <div class="inner-container">
            <div id="div-one" class="absolute">1</div>
            <div id="div-two" class="absolute">2</div>
            <div id="div-three" class="absolute">3</div>
            <div id="div-four" class="absolute">4</div>
            <div id="div-five" class="absolute">5</div>
        </div>
    </div>

CSS

    .absolute {
        position: absolute;
    }

    div.outer-container {
        display: flex;
    }

    div.inner-container {
        border: 2px solid orange;
        position: relative;
        height: 20vh;
        width: 50%;
        margin: auto;
    }


    #div-one,
    #div-two,
    #div-three,
    #div-four,
    #div-five {
        width: 8vw;
        height: 8vh;
        margin: 0;
        text-align: center;
    }

    #div-one {
        background: red;
        top: 0;
        left: 0%;
    }

    #div-two {
        background: lime;
        top: 0;
        left: 31%;
    }

    #div-three {
        background: blue;
        color: white;
        top: 40%;
        left: 0;
    }

    #div-four {
        background: cyan;
        top: 40%;
        left: 31%;
    }

    #div-five {
        background: purple;
        color: white;
        top: 20%;
        left: 62%;
    }

References