Angular - Having trouble to getting desired html output - html

Question

In my Angular project, I have a div with 3 child elements which are a span, an i element (icon) and a span with innerHTML attribute. Normally, all texts should be in the same line, but innerHtml code always starts with p and I can do nothing about it, so this causes a problem. Any suggestions?
This is my output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
This is desired output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span>This is an example text. This is an example text.</span>
</div>

Answer 1

<p> is a block element and you covered it by span(inline). Add style="display: inline;" to <p> element. Browsers automatically add a single blank line before and after each <p> element.
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p style="display: inline;">This is an example text. This is an example text.</p></span>
</div>

Answer 2

It's not clear what you mean by "innerHtml code always starts with p and I can do nothing about it."
If you entered this markup yourself, you can just omit the p tag.
If you are getting this html from a CMS or database, and you can do nothing about the p tag that's in there, then:
Your question maybe should include the binding, not just the output.
You can let the p tag exist, but add CSS to make it do nothing. In the snippet below, I replaced your inline styles with a CSS class "myDiv", and put in a rule to render the p tag useless.
.myDiv {
border: 1px solid #DDD;
padding: 3px;
width: 50%;
margin: 0 auto;
}
.myDiv span p {
display: inline;
}
<div class="myDiv">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>