why the text and the shape dont stay side by side in html code example

Example: style rule that expands the element to cover any floating content within the element

.row {
	clear: both;
}

.row::after {
	clear: both;
	content: "";
	display: table;
}