Then, how do we get the boxes lined up with the widths and heights we want them to have?

<html>
<head>
<style>.box {background-color: gray;width: 50px;height: 25px;border: 1px solid black;display: inline-block;}</style>
</head>
<body><div class="box"></div><div class="box"></div></body>
</html>
]]>

Way to go! Inline-block elements are like inline elements, except they can have widths and heights.

Didn't we want the boxes to be in a single line? Besides, aren't <div> elements block-level elements by default?