Just starting out with css, trying to get some practice.
I'm attempting to position two divs on opposite sides of a parent div.
Switching flex-direction from 'column' to 'row' causes the divs to disappear.
#assignments-wrapper {
padding: 1.5rem;
}
.assignment {
min-height: 40px;
margin-bottom: .5rem;
background: black;
display: flex;
}
.red {
width: 5%;
height: 40px;
background: #DC3220;
}
.green {
width: 5%;
height: 40px;
background: #1AFF1A;
}
.blue {
width: 5%;
height: 40px;
background: #1A85FF;
}
#row7 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#first .red {
height: 10px;
width: 10%;
}
#first .green {
height: 15px;
width: 10%;
}
#second .red {
height: 10px;
width: 10%;
}
#second .green {
height: 15px;
width: 10%;
}<div id="assignments-wrapper">
Row 7
<div class="assignment" id="row7">
<div id="first">
<div class="green"></div>
<div class="red"></div>
<div class="green"></div>
</div>
<div id="second">
<div class="green"></div>
<div class="red"></div>
<div class="green"></div>
</div>
</div>
</div>With flex-direction:column: https://i.sstatic.net/oF3m4.png
With flex-direction:row:
https://i.sstatic.net/T0M6Q.png
Desired outcome (ignore width/height of colors, screenshots were not sized properly):
https://i.sstatic.net/2tnSX.png
I added flex to all ids, nothing changed.