Inner div pushes paragraph outside outer div - html

Question

I have a div called insidenextcontent2.
This is just a div that colors a section.
In this div I have another div called bottle1, which is a geometrical shape(supposed to be the top of a bottle).
Also, I have a paragraph which I want to position besides this geometrical shape. However, the paragraph is placed below the whole div(insidecontent).
How can I fix this? I want the text to be inside the outer div, besides the inner 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

place your paragraph in a div alongside the bottle div.
add display: flex to your containing div.
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;
}