I want to change the direction of a child without affecting other children.
enter code here<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Reassignment 4</title><style>* { box-sizing: border-box; } .parent { width: 500px; height: 500px; margin: 50px auto; background-color: #eee; display: flex; justify-content: space-between; } .parent > div { width: 230px; height: 100%; background-color: #fbafaf; } .e, .l { display: flex; flex-direction: column; } .e > div, .l > div { width: 50px; height: 50px; background-color: #333; } .one { display: flex; flex-direction: row; }</style><link rel="stylesheet" href="css/style.css"></head><body><div class="parent"><div class="e"><div class="one"></div><div class="two"></div><div class="three"></div><div class="four"></div><div class="five"></div></div><div class="l"><div class="first"></div><div class="second"></div></div></div></body></html>The thing is, I want to draw the letters "EL" with the flex, and the .one div is the above line.I want to change its direction to row and then give it a flex-basis to draw the line without affecting the other element's direction, but it's not working. I tried all the solutions and searched everywhere, but I still can't draw the letters "EL."How can I do it?