I have a total of 10 children within a parent div. I am currently applying display: 'flex' and flex-direction: 'row' to every pair of children by wrapping them in separate divs with the class 'flex-row'. Is there a more efficient method or pseudo-class that will allow me to avoid creating these additional div layers? Thank you.
<div>
<div class='flex-row'>
<div>A</div>
<div>B</div>
</div>
<div class='flex-row'>
<div>C</div>
<div>D</div>
</div>
<div class='flex-row'>
<div>E</div>
<div>F</div>
</div>
<div class='flex-row'>
<div>G</div>
<div>H</div>
</div>
<div class='flex-row'>
<div>I</div>
<div>J</div>
</div>
</div>
.flex-row {
display: flex;
flex-direction: 'row';
}