Inner div schiebt Absatz außerhalb der äußeren div

Question

Ich habe eine div namens insidenextcontent2. Dies ist nur ein div, das einen Abschnitt färbt. In diesem div habe ich eine andere div namens bottle1, die eine geometrische Form ist (soll die Oberseite einer Flasche sein). Auch ich habe einen Absatz, den ich neben dieser geometrischen Form positionieren möchte. Der Absatz befindet sich jedoch unterhalb des gesamten div (Inneninhalt).

Wie kann ich das beheben? Ich möchte, dass sich der Text innerhalb des äußeren div befindet, neben dem inneren div.

.insidenextcontent2 { 
 
    margin-top: 10%; 
 
    width: 100%; 
 
    height: 15%; 
 
    background: #EEFA0F; 
 
} 
 

 
.bottle1 { 
 
    margin-left: 30%; 
 
    border-top: 97px solid black; 
 
    border-left: 35px solid transparent; 
 
    border-right: 35px solid transparent; 
 
    height: 0; 
 
    width: 150px; 
 
} 
 

 
#webpara { 
 
    color: black; 
 
    margin-left: 50%; 
 
    font-family: 'Fjalla One', sans-serif; 
 
}

<div class="insidenextcontent2"> 
 
    <div class="bottle1"></div> 
 
    <p id="webpara">Web &amp app development</p> 
 
</div>

Answer 1

1. Ort, um Ihren Absatz in einem div neben der Flasche div.
2. fügen Sie display: flex zu Ihrem enthaltenden div hinzu.

https://jsfiddle.net/m08paL1d/2/

<div class="insidenextcontent2"> 
    <div class="bottle1"> </div> 
    <div> 
     <p id="webpara">Web app development</p> 
    </div> 
</div> 

CSS:

.insidenextcontent2 { 
    margin-top: 10%; 
    width: 100%; 
    height: 15%; 
    background: #EEFA0F; 
    display: flex; 
} 

.bottle1 { 
    margin-left: 30%; 
    border-top: 97px solid black; 
    border-left: 35px solid transparent; 
    border-right: 35px solid transparent; 
    height: 0; 
    width: 150px; 
} 

#webpara { 

    color: black; 
    margin-left: 50%; 
    font-family: 'Fjalla One', sans-serif; 
}