How to optimize a section in HTML/CSS How to set in HTML/CSS a section just like in this picture https://snag.gy/mStL9H.jpg ?
I have tried something but am not sure if it's right.



#trd-banner{
    background-color:#284c57;
    width:100%;
    height:50%;
    margin:auto;
}
#list{
    position:relative;
 left:110px;
 top:1px;
 width:200px;
 height:150px;
    margin:0px 15px 15px 0px;
}
#list img{
    margin:0px 50px 50px 15px;
}
#prah {
    position:right;
 right:610px;
 top:180px;
 width:240px;
 height:171px;
    margin:0px 0px 15px 15px;
}
#prah img{
    float:right;
    
}

    
&lt;div id="trd-banner"&gt;
        &lt;div class="wrapper"&gt;
            &lt;div id="list"&gt;
        &lt;img src="images/list.png" height="300" width="300"&gt;
            &lt;/div&gt;
            &lt;div  id="tekst"&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;Unsere Zeolithprodukte sind reine Naturprodukte.&lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;Sie bestehen zu 100% aus Zeolith mit einem hohen&lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;Klinoptilolithanteil.&lt;/p&gt;&lt;br&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;Das Produkt wurde von uns selbst 2 Jahre lang getestet,&lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;bevor wir auf die Idee kamen, dass wir allen Menschen &lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;diese Freude übermitteln wollen, dieses überwältigende &lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;positive Gefühl von dessen Wirkung.&lt;/p&gt;&lt;br&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;Da wir viel auf Reisen sind, nehmen wir Zeolith überall mit.&lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;Für uns ist es das Wichtigste, etwas worauf man nicht&lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;vergessen darf.&lt;/p&gt;&lt;br&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;
Deswegen wollen wir, dass jeder der Zeolith probieren will,&lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;sich auch ein Produkt von hochwertiger Qualität leisten kann. &lt;/p&gt;&lt;br&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;In Liebe und Respekt,&lt;/p&gt;
                &lt;p style="color:#fff;font-family:Fauna One"&gt;Ihre ZeolithFit Familie&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="prah"&gt;
                &lt;img src="images/Prah.png" width="200" height="200"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
    &lt;/div&gt;
If you write this by hand you should pay attention to consistent
indentation and such as well because it makes things much easier to
read.

The IDs "tekst" and "prah" are a bit opaque, I assume that the first
one should really be "text" instead.

The major complaint I have is the repetition of the style for each and
every line of text.  That should be moved to the surrounding div so
that it applies to all subelements instead.  Also, you should probably
make sure that you supply some fallback fonts in case this one can't be
loaded.

The &lt;br&gt;s at the end of some lines shouldn't be necessary.  If you
want a force empty line maybe move each block of paragraphs into their
own div and control it via that.  The fact that you're manually doing
line breaks is obviously a problem.  It would be much better in terms of
organisation if you just have five or six paragraphs with all the text
and then control text flow by setting the boundaries of the
surrounding box.  You don't have any hyphenation, so that too is no
excuse.  N.b. take a look at how the formatting looks in different
screen sizes as well as on mobile screens (i.e. using the inspector
and emulating a smaller screen).

Having additional divs for the images is maybe not needed?  But then
again, it's really up to the CSS how that works out in the end.