I want to make a "About me" page that would contain a box with a thin border, pin to the center of the page. 

I need some text on the left half of the box and an image on the right side of the box. 

I have a hard time doing that with `<div>` and it just doesn't work the way I want it.
How do I solve this problem. 

**Below you can see my code so far:**

```
<div style="background-color: white;
     border: 5px solid #3D65A9;
     padding: 50px;
     margin: 20px;">

     <h4 style="text-align: left; 
                font-family:'Cinzel'; 
                white-space:pre-line; 
                margin-left: 10px;
                display: inline-block">Hi everyone!!Random text.
     </h4>
     <img src="Moja-slika.jpg" alt="Moja slika" style="width:30%">
</div>

```

This is what I get, and I want my text to be on top, not on the bottom.
And I want to make image and whole smaller.   

[![Image](https://i.stack.imgur.com/SKOvL.png)](https://i.stack.imgur.com/SKOvL.png)