Bootstrap 5: Prevent list from wrapping under image

Question

Is there a way to make list items wrap when not enough room but stop wrapping when there is? Just like with text that wraps around an image.

This is my code:

<h3><?php echo $pageLabel; ?></h3><hr />
<figure class="figure float-end text-wrap" style="border:1px solid red">
    <img class="img-fluid shadow ms-3 mb-2" src="/images/<?php echo $pageImage; ?>" alt="<?php echo $pageImage; ?>" />
    <figcaption class="figure-caption small ms-3 mb-2" style="border:1px solid red"><?php echo (isset($pageDesc)? $pageDesc : ""); ?></figcaption>
</figure>
<ul class="text-nowrap list-group border-1 p-1" style="border:1px solid red">
    <?php echo $text; ?>
</ul>

You can see I've added .text-nowrap to the ul element which results in the second image. When I remove it, all list items wrap: the list will not expand to occupy the entire free space below the image as happens with text.