Units: px, rem, em, and percent

px is fixed. rem is relative to the root font size (16px by default, so 1.5rem is 24px), which scales with the user's browser setting; use it for font sizes and spacing. em is relative to the current element's font size, useful for padding that should grow with the text. % is relative to the parent for widths. vw and vh are percentages of the viewport.

A common setup: sizes in rem, widths in % or fr, borders in px. Changing html { font-size } then rescales the whole page.

html { font-size: 20px; }
p { font-size: 1.5rem; }     /* 30px */
.half { width: 50%; }

Your task

Set the root font size (html) to 20px, make p 1.5rem (which should compute to 30px), and make .half 50% wide.

<!doctype html>
<html>
<head>
<style>
html { font-size: 20px; }
p { font-size: 1.5rem; }
.half { background: rgb(232, 239, 255); width: 50%; }
</style>
</head>
<body>
<p>Scaled with rem.</p>
<div class="half">Half the width of the body.</div>
</body>
</html>