How to properly place several rows of text next to an image and indent it correctly

So, I am just beginning to learn HTML and CSS and am working on a private project. What I am trying to achieve is this: https://imgur.com/a/kg1rE9U

The thing I struggle with is the first blue "box". More precisely, I just don't know how to properly format it like in the above picture (distance to the borders of the box, distance between image and text2 / text 3, ...). Not only does my code not work as intended (the distance between text2 and text3 is way too large for example), I also feel like I am doing it more complicated than it actually is.

HTML-Code so far is

<div class="standardfield", style="width: 100%;">
                        <p class ="standardfield", style="float:left;">
                            <span style="display:block; height: 20px;"></span>
                            <img src="image.png">
                        </p>
                        <p class ="standardfield", style="font-size: 40px; text-indent:20px;">
                            <span style="display:block; height: 20px;"></span>
                            <b>text2</b>
                        </p>
                        <div class="standardfield", style="font-size:20px; text-indent: 20px;"> 
                            text3 
                        </div>

while the CSS is

.standardfield {
            text-align:left;
            background-color: #D0DEED;
            color: #548DD1;
            }