<main>
    <h1>Resize me!</h1>
    <span class="simulated-image">Simulated image</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra porttitor magna non ultrices. Nam at laoreet diam, sit amet semper diam. Curabitur faucibus dignissim odio, eu scelerisque leo auctor eu. Sed luctus dolor in mauris vehicula, a vulputate libero pretium. In dolor metus, maximus eget venenatis et, dictum ut urna. Cras quis venenatis nisi. Quisque tristique cursus est. Aenean vestibulum magna vitae tellus dictum finibus.</p>
    <p>Morbi semper mattis mollis. Donec id enim nec tellus posuere viverra. Praesent faucibus sapien arcu, in pharetra ligula euismod et. Suspendisse urna est, finibus a malesuada ac, vehicula congue lorem. Donec ac dignissim eros. Curabitur sit amet tellus orci. Duis varius pharetra molestie. Duis vehicula porttitor interdum.</p>
    <p>Nulla quis sem tincidunt, rutrum dolor at, dignissim libero. Duis elit leo, convallis a mauris laoreet, facilisis dignissim tellus. Fusce lacinia dui sit amet pulvinar elementum. Sed odio diam, congue finibus aliquet sit amet, iaculis at enim. Mauris in commodo enim. Phasellus euismod elit at enim pretium, at malesuada odio tincidunt. Integer non neque eu felis congue commodo. Mauris ornare nec augue at interdum. Vivamus convallis porta lorem.</p>
</main>
.simulated-image {
    background: red;
    color: white;
    display: inline-grid;
    height: 20rem;
    place-content: center;
    text-align: center;
}

@container (width < 25rem) {
    .simulated-image {
        display: grid;
        margin: auto;
        max-width: 15rem;
        width: 100%;
    }
}

@container (width >= 25rem) {
    .simulated-image {
        max-width: 50%;
        width: 15rem;
        float: left;
        margin: 0 1rem 1rem 0;
        float: inline-start;
        margin-block: 0 1rem;
        margin-inline: 0 1rem;
    }
}

main {
    container-type: inline-size;
    background: #ddd;
    min-height: 10rem;
    overflow: scroll;
    padding: 1rem;
    resize: both;
}

main > :first-child {
    margin-top: 0;
}

main > :last-child {
    margin-bottom: 0;
}

/* minimal styles to make things prettier */

body {
    /* https://modernfontstacks.com/ */
    --classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
        sans-serif;
    font-family: var(--classical-humanist);
    font-size: 1.125rem;
    margin: auto;
    max-width: 30rem;
    padding: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.