float
This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. Since floats are not in the flow, block boxes created before and after the float flow vertically as if the float did not exist. However, line boxes created next to the float are shortened to make room for the margin box of the float.
All three boxes establish block formatting contexts. The border edge of the pink box touches the right edge of the yellow box.
The box ‘shrink-wraps’ around its content.
Style the pink box with:
width: 40%;