DONT ADD ANYTHING HERE!

Example display:block

One
Two
Three
css 
    .wrapper {
        border: 2px solid gray;
        background-color: var(--primary-green);
        margin-top: 2vh;
    }

    .item {
        background-color: lightgoldenrodyellow;
        width: 10vw;
        height: 100px;
        border: 2px solid green;
    }

    .item {
        display: block
    }
html 
    <div class="wrapper">
        <div class="item">One</div>
        <div class="item">Two</div>
        <div class="item">Three</div>
    </div>

Example display:inline

One
Two
Three

Note

Note that both width and height are ignored
css 

    .wrapper-2 {
        border: 2px solid gray;
        background-color: var(--primary-green);
        margin-top: 2vh;
    }

    .item-2 {
        background-color: lightgoldenrodyellow;
        width: 10vw;
        height: 100px;
        border: 2px solid green;
    }

    .item-2 {
        display: inline;
    }
html 
    <div class="wrapper-2">
        <div class="item-2">One</div>
        <div class="item-2">Two</div>
        <div class="item-2">Three</div>
    </div>

Example display:inline-block

One
Two
Three
css 
    .wrapper-3 {
    border: 2px solid gray;
    background-color: var(--primary-green);
    margin-top: 2vh;
    }

    .item-3 {
    background-color: lightgoldenrodyellow;
    width: 10vw;
    height: 100px;
    border: 2px solid green;
    }

    .item-3 {
    display: inline-block;
    }
html 
    <div class="wrapper-3">
        <div class="item-3">One</div>
        <div class="item-3">Two</div>
        <div class="item-3">Three</div>
    </div>

Example display:flex

One
Two
Three

Note

Note that it is the wrapper that is display:flex
css 
    .wrapper-4 {
        border: 2px solid gray;
        background-color: var(--primary-green);
        margin-top: 2vh;
    }

    .item-4 {
        background-color: lightgoldenrodyellow;
        width: 10vw;
        height: 100px;
        border: 2px solid green;
    }

    .wrapper-4 {
        display: flex;
    }
html 
    <div class="wrapper-4">
        <div class="item-4">One</div>
        <div class="item-4">Two</div>
        <div class="item-4">Three</div>
    </div>

Example display:flex justify-content:space-around

One
Two
Three
css 
    .wrapper-7 {
        border: 2px solid gray;
        background-color: var(--primary-green);
        margin-top: 2vh;
    }

    .item-7 {
        background-color: lightgoldenrodyellow;
        width: 10vw;
        height: 100px;
        border: 2px solid green;
    }

    .wrapper-7 {
        display: flex;
        justify-content: space-around;
    }
html 
    <div class="wrapper-7">
        <div class="item-7">One</div>
        <div class="item-7">Two</div>
        <div class="item-7">Three</div>
    </div>

Example display:grid

One
Two
Three
css 
    .wrapper-5 {
        border: 2px solid gray;
        background-color: var(--primary-green);
        margin-top: 2vh;
    }

    .item-5 {
        background-color: lightgoldenrodyellow;
        width: 10vw;
        height: 100px;
        border: 2px solid green;
    }

    .wrapper-5 {
        display: grid;
    }
html 
    <div class="wrapper-5">
        <div class="item-5">One</div>
        <div class="item-5">Two</div>
        <div class="item-5">Three</div>
    </div>

Example display:grid; grid-template-columns: repeat(3, 1fr)

One
Two
Three
css 
    .wrapper-6 {
        border: 2px solid gray;
        background-color: var(--primary-green);
        margin-top: 2vh;
    }

    .item-6 {
        background-color: lightgoldenrodyellow;
        width: 10vw;
        height: 100px;
        border: 2px solid green;
    }

    .wrapper-6 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
html 
    <div class="wrapper-6">
        <div class="item-6">One</div>
        <div class="item-6">Two</div>
        <div class="item-6">Three</div>
    </div>

Notes

References

MDN: display
W3Schools: CSS display Property