How can I move a flex-item to the right while two other flex items remain on the left? [duplicate]

3 weeks ago 25
ARTICLE AD BOX

enter image description hereI need to push the "cancel button" (x) to the right of the modal. If I use justify-content: space-between, the text "Are you sure you want to do that?" gets moved to the center (which needs to remain on the left).

As this is purely a flex-box programming challenge, how do I accomplish this without using other css styling methods such as margin-left: auto if at all possible?

Here is the current relevant code:

.first-row{ display: flex; } <div class="modal"> <div class = "first-row"> <div class="icon">!</div> <div class="header">Are you sure you want to do that?</div> <button class="close-button">✖</button> </div> <!-- Fist Row Div--> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div> <button class="continue">Continue</button> <button class="cancel">Cancel</button> </div>

Temani Afif's user avatar

Temani Afif

281k31 gold badges381 silver badges506 bronze badges

Yasin Zahir's user avatar

Read Entire Article