Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .container { display: flex; } .box { flex: 1; display: flex; justify-content: center; } .box:first-child > span { margin-right: auto; } .box:last-child > span { margin-left: auto; } .box { align-items: center; border: 1px solid #666; background-color: #c8cbcf; height: 60px; } p { text-align: center; margin: 5px 0 0 0; } </style> </head> <body> <div class="container"> <div class="box"> <span>short text</span> </div> <div class="box"> <span>centered text</span> </div> <div class="box"> <span>loooooooooooooong text</span> </div> </div> </body> </html>