I have an HTML layout styled with flexbox, but the current CSS isn't achieving the desired layout. I want the second row of the second column to begin immediately after the first columns second row.
Here is the code:
.container { display: flex; flex-direction: row;}.programs { background: blue;}.programs-2 { background: green;}.xyz { margin-bottom: 10px; display: flex; flex-grow: 0; /* Prevents growth */}.xyz ul { display: flex; flex-direction:row; list-style: none; padding: 0; margin: 0;}.xyz ul .box { width: 100px; background: red; border-right: 1px solid #fff;}.xyz ul .box:last-child { width: 200px;}.programs .xyz:first-child ul .box:last-child { width: 300px; /* This affects only the first column */}/* Remove horizontal spacing on programs-2 */.programs-2 .xyz { margin-left: 0; /* Ensure no margin on left side */}<div class="container"><div class="programs"><div class="xyz"><ul><li class="box"> ABC</li><li class="box"> ABC</li><li class="box last"> ABC</li></ul></div><div class="xyz"><ul><li class="box"> ABC 2</li><li class="box"> ABC</li><li class="box last"> ABC</li></ul></div></div><div class="programs-2"><div class="xyz"><ul><li class="box"> ABC</li><li class="box"> ABC</li><li class="box last"> ABC</li></ul></div><div class="xyz"><ul><li class="box"> ABC 2</li><li class="box"> ABC</li><li class="box last"> ABC</li></ul></div></div></div>Note:- I don't want to change the HTML because the HTML structure depends on specific functionality which I can't change.