Make HTML know where to start putting stuff-CodePudding

I have a website with an image to the right and and image to the left. These two happen to have been added to the same "line" of the page, that is to say, these two are on the same level. However, now I want to add buttons to the page and they are always put in the middle of these two images, but I want them to rather be located below them. Is there a way to do it? I added a bunch of <br>'s to fix the problem but there has to be a better way.

Edit: An example of when this occurs is the following code:

<!DOCTYPE html>
<img align="left" src="exemplar.png">
<img align="right" src="exemplar.png">
Text

Edit 2:

Thanks to an answer below I came up with this method:

<!DOCTYPE html>
<meta content="width=device-width, initial-scale=1.0">


<div style="display:flex; flex-direction: column">
    <div>
        <img align="left" src="exemplar.png" style="width: 25%">
        <img align="right" src="exemplar.png" style="width: 25%">
    </div>
    
    <div>
        This text is supposed to be so long as to check whether it will not go up.
        <button>button</button>
    </div>
    The above button is in the above line thanks to the inner div.
</div>

This is much better and pretty much answers my question. But if you know of other methods, let me know!

CodePudding user response：

Try This It Will Fix our Problem

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div  style="display: flex;">
            <div  style="display: flex; flex-direction: column; align-items: center;">
                <img align="left" src="exemplar.png" style="width: 50%;">
                <button>Left</button>
            </div>
            <div  style="display: flex; flex-direction: column; align-items: center;">
                <img align="right" src="exemplar.png" style="width: 50%;">
                <button>Right</button>
            </div>
        </div>
    </body>
</html>