How do I place a text on the same line as a bootstrap Collapse button?

Question

    <div>
    <p>TROCO</p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        ...
    </button>

    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            texto que aparece quando pressiono o botão
        </div>
    </div>
</div>

The code is this one, I wanted the text "CHANGE" to appear in the same line as the button, when I open the page they are in different lines, and if I put the text inside the < button> the text goes inside the button... Does anyone know what’s going on??

Answer 1

The <p> is an element block, ie it occupies the entire line (100%) of the width of the screen, so the button is not on the side. One way to fix this is for example to change the <p> by a <span>

See how it looks in the code:

 <div>
    <span>TROCO</span>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        ...
    </button>

    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            texto que aparece quando pressiono o botão
        </div>
    </div>
</div>