Input
Output
<!DOCTYPE html> <html lang="en"> <head> <style> *, *::before, *::after { box-sizing: border-box; } .container { width: 100%; padding: 20px; background-color: lightgray; } .box { width: 50%; /* This box will take 50% of the parent width */ padding: 20px; border: 2px solid black; background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="box">This box will have a width of 50% of the container, with padding and border included inside the width.</div> </div> </body> </html>