[azimuth]

M̶m̶m̶...t̶h̶a̶t̶ M̶o̶o̶n̶+̶ e̶R̶e̶a̶d̶e̶r̶ a̶g̶a̶i̶n̶;̶ i̶t̶'s̶ a̶ q̶u̶a̶l̶i̶t̶y̶ p̶r̶o̶d̶u̶c̶t̶, y̶e̶t̶ c̶a̶n̶ c̶r̶e̶a̶t̶e̶ f̶i̶c̶k̶l̶e̶ C̶S̶S̶ c̶o̶d̶e̶ c̶h̶a̶l̶l̶e̶n̶g̶e̶s̶ s̶o̶m̶e̶t̶i̶m̶e̶s̶. T̶h̶e̶ f̶i̶g̶u̶r̶e̶/f̶i̶g̶c̶a̶p̶t̶i̶o̶n̶ i̶s̶ v̶i̶a̶b̶l̶e̶ f̶o̶r̶ ̶b̶̶o̶̶t̶̶h̶̶ ̶e̶̶p̶̶u̶̶b̶̶2̶̶x̶̶ ̶a̶̶n̶̶d̶̶ e̶p̶u̶b̶3̶x̶. T̶h̶e̶ 'f̶l̶e̶x̶' i̶s̶ f̶o̶r̶ e̶p̶u̶b̶3̶x̶ o̶n̶l̶y̶.

Update...
I must agree with the additional commenters below, nothing can resolve Moon+ internal default code, because it's a limited use app. We also experimented with figcaption, then flex, then just DIV's (versus 'table'), then tried it with left/right floats, and Moon+ still flips the image below the text. Where Moon+ places that image cannot be resolved (side by side with text).

The box text font color can be controlled as you've designed it by adding class="white" to the code for the text, and to the stylesheet add: .white {color: #fff;}

To keep image at same fullest size (even though it will still flip down below the text in Moon+), add a class="image" to that particular image, and to the stylesheet add your choice of pixel dimension as follows: .image {max-width: 150px;}