I want to make the divs all appear on the same line if they are on the same level in their own respective columns. This is a basic interpretation of what my template looks like, and I use vue to create the Row and Col templates. The items are not the same size, so I would like the items to appear on the same line relative to the biggest item in the same level.
<div><Container><Row><Col><div>item1</div><div>{{ item2 }}</div><div>item3</div></Col><Col><div>First</div><div>{{ second }}</div><div>third</div></Col><Col><div>item11</div><div>{{ item22 }}</div><div>item33</div></Col><Col><div>item</div><div>{{ item }}</div><div>item</div></Col><Col><div>item<div></Col><Col><div><button>b1</button><button>b2</button><buttonb3</button></div></Col></Row></Container></div>I've tried messing around with the flexbox, but I am pretty new to it. Also tried in-line block.