display property is the most important CSS property for controlling layout.

Block-level elements

A block-level element always starts on a new line and takes up the full width available

<div class="row">
    <div class="col-3">
        <h4>Display block-level element</h4>
        <div>A block-level element always starts on a new line and takes up the full width available</div>
    </div>
    <div class="col-9" id="display_1">
        <p>Hi my name is Folau</p>
        <p>Hi my name is Folau</p>
        <p>Hi my name is Folau</p>
    </div>
</div>
        <style>
            #display_1 p{
                display: block;
            }
        </style>

Inline elements

An inline element does not start on a new line and only takes up as much width as necessary.

<div class="row">
    <div class="col-3">
        <h4>Display inline element</h4>
        <div>An inline element does not start on a new line and only takes up as much width as necessary.</div>
    </div>
    <div class="col-9" id="display_2">
        <p>Hi my name is Folau</p>
        <p>Hi my name is Folau</p>
        <p>Hi my name is Folau</p>
    </div>
</div>
        <style>
            #display_2 p{
                display: inline;
            }
        </style>

Source code on Github