In the image attached, I am creating a horizontal rectangle.horizontal rectangle
Using the following CSS, I am able to create a horizontal rectangle on my div:
.Rectangle {
width: 516px;
height: 50px;
border-radius: 4px;
border: solid 1px rgba(78, 158, 186, 0.2);
background-color: #e5f1f5;
}
<div class="Rectangle"></div>
However, I am struggling to create a small solid rectangle on the left side of the image with an info icon inside. How can I achieve this? Here is the CSS for the smaller rectangle:
.Rectangle-14 {
width: 60px;
height: 50px;
background-color: #4e9eba;
}
And here is the CSS for the info icon:
.info-icon {
width: 30px;
height: 30px;
object-fit: contain;
}
Any suggestions on how I can accomplish this task?
You can also check out my fiddle here