Experiment in Clean Side Images w/o Flexbox

Do you see those awesome websites with a central body of content and then some images and links on the side? Kinda like this page? Do you want advice from someone who is not good at HTML and CSS?

I want something that looks like this!

A page with centralized text and some cool images on the sides that change scale as the browser window gets resized, so ALL of the image is always visible without scrolling left or right.

And all while sacrificing their position on the page as little as possible!

This is really not at all the way I'd do this in most cases, but I didn't want to fiddle with flexboxes or a grid and I did get this to work in the way that I needed it to, so I thought I'd share.

<div style=
"border:5px solid gray;
border-radius:5px;
padding:15px;
width:300px;
margin:auto;">
    <p style="text-align:center">I want something that looks like this!</p>
    <p>
        <div style="position:relative;width:20%;height:0px">
            <img src="image1.png" style="position:absolute;width:100%;top:0px;left:-180%;">
        </div>
        <div style="position:relative;width:20%;height:0px">
            <img src="image2.png" style="position:absolute;width:100%;top:70px;left:-130%;">
        </div>
        <div style="position:relative;width:20%;height:0px">
            <img src="image3.png" style="position:absolute;width:100%;top:70px;left:-130%;">
        </div>
        <div style="position:relative;width:100%;height:0px">
            <img src="image4.png" style="position:absolute;width:20%;top:-20px;right:-40%;">
        </div>
        A page with centralized text and some cool images on the sides that change scale as the browser window gets resized, so ALL of the image is always visible without scrolling left or right.
        <br><br>
        And all while sacrificing their position on the page as little as possible!
    </p>
</div>

This is exactly what's above, except for the filepaths of the images. Essentially, within the main content container, I create divs with position:relative. Within those divs I create an img with position:absolute. I put the divs within the main container because I want to position my images relative to certain elements within the content-- maybe a section header or something.

Some of the width and height stuff I think is pretty wonky-- but it works!!! And is fun to play around with, haha.

The sane alternative to something like this, and what I do for the sidebars of this website, is using a flexbox. I'm like 90% I could do exactly what I needed to do for the jellyfish lamp page with a flexbox. Buuut I set up that page really fast and wanted it to be very simple, so I didn't use a flexbox. I really don't know if there's any genuine use case for setting up images in this way. I just thought it was interesting and nesting a position:absolute inside a position:relative felt like a neat trick :P