Custom ordered list with paragraphs CSS - html

Question

I'm trying to get a customized ordered list to work with paragraphs and other containers but I can't get the lists to behave the same as the default.
Specifically, I would like to have a customized list and paragraphed content that appears on the same line as the enumeration. Also, I'm looking for a solution that changes the list and not the paragraph. The paragraph is just an example of some generated content that I do not wish to alter.
.custom {
list-style-type: none;
counter-reset: elementcounter;
}
.custom li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
.solution {
list-style-type: none;
counter-reset: elementcounter;
}
.solution li>p {
display: inline-block;
}
.solution li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
<ol>
<li><p>Places nicely on the same line.</p></li>
<li><p>Places nicely on the same line.</p> <p>Places nicely on the same line.</p></li>
</ol>
<!-- Original problem
<ol class="custom">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places nicely on the second line.</p></li>
</ol>
-->
<ol class="solution">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
</ol>

Answer 1

As #Temani Afif mentioned, you could add inline-block to the p - like this:
.custom li > p {
display: inline-block;
margin: 2px; /* you can also adjust your margins/padding if you wish */
}
UPDATE
Based on the comments (and updated question) if you have multiple paragraphs on the same <li> then you can add different styles for the first p in the list and the rest of the ps on the list. Something along the lines of:
.custom li > p {
margin: 2px;
}
.custom li > p + p {
display: block;
margin: 0 1.1em;
list-style-type: none;
}
.custom li > p:first-of-type {
display: inline-block;
}
See demo code below..
Updated demo code based on comments
.custom {
list-style-type: none;
counter-reset: elementcounter;
}
.custom li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
.custom li > p {
margin: 2px;
}
.custom li > p + p {
display: block;
margin: 0 1.1em;
list-style-type: none;
}
.custom li > p:first-of-type {
display: inline-block;
}
<ol>
<li>
<p>Places nicely on the same line.</p>
</li>
<li>
<p>Places nicely on the same line.</p>
</li>
</ol>
<ol class="custom">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
</ol>