Image and text side by side is not working - html

Question

I am trying to put an image and text side by side, but it is not working. The current look that I get is as shown below in the figure:
The intended layout is :
The code that I am using is as follows:
<div class="form widget widget-large">
<form method="POST">
#csrf
<img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
style="width : 30%; display: inline-block; vertical-align: top;">
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
</form>
</div>
I followed some tutorials that accomplish image and text side by side, but it is still not working.
May anybody knows what is the problem?
Thank you in advance.

Answer 1

The simple answer, following what you already have in the code which is using inline-block on some elements, is to use it also on the divs with the name: elements as a browser will start an element on a newline unless told otherwise.
Here is a snippet:
<div class="form widget widget-large">
<form method="POST">
#csrf
<img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
style="width : 30%; display: inline-block; vertical-align: top;">
<div style="display:inline-block;">
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div style="display:inline-block;">
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div style="display:inline-block;">
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div style="display:inline-block;">
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
</form>
</div>
However, this will not be the end of the formatting you want to do I suspect. Also, you have a label Name as if it's associated with an input element, but there is no input element. Perhaps that is to come.

Answer 2

I strongly recommend that you need to split areas left and right. After that the left column set as display:inline-block; and float:left. This two CSS property will justify the column to the left to put another column to the right.
After creating the left and right columns, you must assign these two variables for the right column because element is a block element and it will cover all row if you don't manipulate it with the display:inline-block;
.left, .right {
display:inline-block;
float:left;
width: 50%;
}
img {
width:100%;
height:auto;
display: inline-block;
vertical-align: top;
}
<div class="form widget widget-large">
<form method="POST">
<div class='left'>
<img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
>
</div>
<div class='right'>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
</div>
</form>
</div>
Another Solution
Grid system has been used widely to do this problem and it is easy to use. For examle Bootstrap has a grid system. You can research and try it only with grid css.