When working with two divs that need to sit at opposite sides of the parent container, using a flexbox with justify-content: space-between is ideal. However, an issue arises when the flex items wrap, causing them to be left-aligned due to only having two total items.
Is there a way to center-align rows with single items?
<div style="display: flex; justify-content: space-between; flex-wrap: wrap">
<div style="background: orange">
<strong>Canvas Prints</strong><br>
<span style="font-size: 14px; color: #ff0000">Create a masterpiece for any wall in your home!</span>
</div>
<div style="background: pink">
<img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
</div>
</div>(You can also check out the fiddle for a better visualization: https://jsfiddle.net/xv6oa418/1/)
Additionally: One suggestion was to add flex: 1 to the first child div, but it's preferred for text in the left div to not wrap unless absolutely necessary (specifically after the second flex item wraps onto the next line). The second div will contain an image, as reflected in the updated fiddle and snippet.