How to limit a block of text to the size of an image?

I need to make blocks of the same width and height. At the same time, do not make the size fixed to adapt to the screen of the mobile device.

Text is small

Text is long

<style>
    .wrapper {
        display: inline-flex;
    }

    .item {
        width: 100%;
        height: 100%;
    }
</style>

<div>
    {% for playlist in library['playlists'] %}
    <div class="wrapper">
        <div class="item">
            <img src={{ pic }} alt={{ playlist['description'] }}>
            <p style="text-align: left;"><input type="checkbox" name="playlist_item" value={{ playlist['kind'] }}>{{ playlist['title'] }}</p>
        </div>
    </div>
    {% endfor %}
</div>

UPDATE:

If I add class wrapper to outside div. Blocks are the same size. But in one line with vertical scrollbar. How do it horizontal?

<div class="wrapper">
    {% for playlist in library['playlists'] %}
    <div class="wrapper">
    ...
    {% endfor %}
</div>