Lightning Layout Item Styling Not Consistent

Question

This is not making sense to me: I have a simple style declared in the component's css file:

.targetcolor  {
    background-color: #bff0ff;
}

Which I reference like this:

<lightning-layout-item class="slds-p-around_x-small targetcolor"  key={sd.Id} size="6" large-device-size="3">
<strong>My Simple Label</strong>
 </lightning-layout-item>
 <lightning-layout-item class="slds-p-around_x-small targetcolor"  key={sd.Id} size="6" large-device-size="3">
<strong>{MySimpleValue}</strong>
 </lightning-layout-item>

This normally works, unless:
The label wraps to a second line, in which case the background on the line that appears below the value to align with the wrapped label is now white
The value is empty - and again, the background value is white

Bit if I have layout item with size="12", with a blank value, the background does respect the CSS:

<lightning-layout-item class="slds-p-around_x-small targetcolor"  key={sd.Id} size="12" large-device-size="3">
<strong>{MyEmptySimpleValue}</strong>
</lightning-layout-item>

How do I get the background in the Layout Item to always use the CSS color in the class?

Answer 1

Adding the solution from the comments section.

Using vertical-align="stretch" to the parent lightning-layout will help in wrapping the background along with the text.

More info - https://developer.salesforce.com/docs/component-library/bundle/lightning-layout/example