We have this sort of complex layout item design and my issue is some of the elements keeps going in to the next line.
<lightning:layout>
<lightning:layoutItem size="12">
Title Header
</lightning:layoutItem>
<lightning:layoutItem size="4">
Some Long Text
</lightning:layoutItem>
<lightning:layoutItem size="8">
<lightning:layout>
<lightning:layoutItem size="12">
Instruction Text
</lightning:layoutItem>
<lightning:layoutItem size="4">
Some Widget
</lightning:layoutItem>
<lightning:layoutItem size="8">
<lightning:layout>
<lightning:layoutItem size="12">
Dropdown
</lightning:layoutItem>
<lightning:layoutItem size="6">
Legends
</lightning:layoutItem>
<lightning:layoutItem size="6">
Button
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
</lightning:layout>
But what is happening, is the Dropdown, Legends and Button is going on the next line like the screenshot below, am I missing anything? Any guidance is appreciated.