I have this timeline in HTML, also CSS below I have an exp container whose display is set to flex and direction set to column. I want the last two exp_items to appear in a row manner instead of column direction.
.exp { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}.line { width: 100%; height: 10px; background-color: lightgray; display: flex; justify-content: space-evenly; align-items: center; gap: 150px; margin-top: 50px; margin-bottom: 50px; border-radius: 10px;}.exp_item .description { width: 250px; height: 180px; background-color: transparent;}.exp_ball { width: 60px; height: 60px; border-radius: 50%;}.exp_ball:nth-child(1) { background: url(resources/acesol.png); background-position: center; background-size: contain; background-repeat: no-repeat;}.exp_ball:nth-child(2) { background: url(resources/wurfelbg.jpg); background-position: center; background-size: contain; background-repeat: no-repeat;}.exp_ball:nth-child(3) { background: url(resources/wurfelbg.jpg); background-position: center; background-size: contain; background-repeat: no-repeat;}.exp_item { width: 80%; display: flex; justify-content: space-evenly; align-items: center; gap: 410px;}<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script><nav><div class="nav-container" id="nav-container"><div class="nav-item"><a href="index.html"></a><div class="info"><p>Home</p></div></div><div class="nav-item"><a href="education.html"></a><div class="info"><p>Education</p></div></div><div class="nav-item"><a href="expiriences.html"></a><div class="info"><p>Expirience</p></div></div><div class="nav-item"><a href="certifications.html"></a><div class="info"><p>Certifications</p></div></div><div class="nav-item"><a href="cv.html"></a><div class="info"><p>Ciriculum Vitae</p></div></div></div></nav><br><div class="name"><h1>Expiriences</h1></div><div class="main_content" id="main_content"><div class="exp"><div class="exp_item" id="exp_item"><div class="description description1"><h4>time 1</h4><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident asperiores quis maiores, voluptas dolore, laborum quod exercitationem odit sint quo obcaecati facere repellat quia placeat maxime reiciendis officia corrupti iusto.</p></div></div><div class="exp_item" id="exp_item"><div class="line"><div class="exp_ball"></div><div class="exp_ball"></div><div class="exp_ball"></div></div></div><div class="exp_item" id="exp_item"><div class="description description2"><h4>time 2</h4><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit, at dolorem similique ab culpa modi inventore minima nemo officia dolore blanditiis ducimus veritatis itaque quae id est quia, dignissimos amet.</p></div></div><div class="exp_item"><div class="description description3"><h4>time 3</h4><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptates ad! Voluptatibus beatae quam amet sed magni, assumenda ea, ut mollitia nihil ratione laudantium numquam culpa odit vitae temporibus rerum.</p></div></div></div></div>I have also tried this but it did not worked. I just want the display of exp for the last two items to be flex with direction set to row instead of column
.exp_item:nth-last-child(-n+2) { flex-direction: row; justify-content: space-evenly; align-items: center;}