Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .flex-container { display: flex; justify-content: space-between; height: 300px; padding: 10px; border: 1px dashed #666; } .flex-container > div { width: 15%; height: 80%; margin: 5px; border-radius: 3px; background-color: #8ebf42; } div.item-two { width: 20%; } div.item-three { align-self: flex-end; height: 80px; margin: 0 10%; } </style> </head> <body> <div class="flex-container"> <div class="item-one"></div> <div class="item-two"></div> <div class="item-three"></div> <div class="item-four"></div> </div> </body> </html>