<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 250px;
border: 1px solid pink;
}
p {
margin-bottom: 20px;
}
.flex-end {
background-color: pink;
padding: 10px 0;
display: flex;
justify-content: flex-end;
}
</style>
</head>
<body>
<div>
<p>
Flexbox is a single dimensional layout, which means that it lays items in one dimension at a time, either as a row, or as a column, but not both together. This can be opposed to the two-dimensional model - CSS Grid Layout, which lays the items in two dimensions simultaneously (rows and columns together).
</p>
<p>
In HTML, the default values of the display property are taken from the behaviors which are described in the HTML specifications or from the browser or user default stylesheet.
</p>
<div class="flex-end">
<button type="button">Button</button>
</div>
</div>
</body>
</html>