how to achieve this result?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<img src="https://www.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" width=100 >
</head>
<body>
<div>
<div class="left one">
<img src="https://www.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" width=100>
<!-- <p>goood</p> -->
</div>
<div class="left two">
<p>In this example the text stays on the right of the image and doesn't wrap underneath because the image is in one div and the text is in another div.
In this example the text stays on the right of the image and doesn't wrap underneath because the image is in one div and the text is in another div.
In this example the text stays on the right of the image and doesn't wrap underneath because the image is in one div and the text is in another div.
In this example the text stays on the right of the image and doesn't wrap underneath because the image is in one div and the text is in another div.
In this example the text stays on the right of the image and doesn't wrap underneath because the image is in one div and the text is in another div.
In this example the text stays on the right of the image and doesn't wrap underneath because the image is in one div and the text is in another div.
In this example the text stays on the right of the image and doesn't wrap underneath because the image is in one div and the text is in another div.
</p>
</div>
</div>
<style>
div{
color: white;
}
.left {
float: left;
}
.right {
float: right;
}
.one {
background-color: red;
}
.two {
background-color: blue;
width: 60%;
}
</style>
</body>
</html>
