Position elements in the horizontal

Question

I have the following piece of code, but all the elements come one at the bottom of the other, I would like them to come next to each other, it is possible without having to touch the position of each element separately?

 <div class="back">
                    <p class="p3">10</p>
                    <p class="p3">20</p>
                    <p class="p3">30</p>
                    <p class="p3">40</p>
                    <p class="p3">50</p>
                    <p class="p3">60</p>
                    <p class="p3">70</p>
                    <p class="p3">80</p>
                    <p class="p3">90</p>
                    <p class="p3">100</p>
                    <p class="p3">110</p>
                    <p class="p3">120</p>
                    <p class="p3">130</p>
                </div>

Answer 1

Elements <p> are block by default (user agent style uses display: block;), then just exchange for or other element that is inline, as <span>, something like:

 <div class="back">
    <span class="p3">10</span>
    <span class="p3">20</span>
    <span class="p3">30</span>
    <span class="p3">40</span>
    <span class="p3">50</span>
    <span class="p3">60</span>
    <span class="p3">70</span>
    <span class="p3">80</span>
    <span class="p3">90</span>
    <span class="p3">100</span>
    <span class="p3">110</span>
    <span class="p3">120</span>
    <span class="p3">130</span>
 </div>

Note that if the elements reach the limit width of the parent element or view-port (or body, it depends on how you set it) you could use white-space: nowrap;, example:

.back {
    white-space: nowrap;
}

<div class="back">
    <span class="p3">10</span>
    <span class="p3">20</span>
    <span class="p3">30</span>
    <span class="p3">40</span>
    <span class="p3">50</span>
    <span class="p3">60</span>
    <span class="p3">70</span>
    <span class="p3">80</span>
    <span class="p3">90</span>
    <span class="p3">100</span>
    <span class="p3">110</span>
    <span class="p3">120</span>
    <span class="p3">130</span>
    <span class="p3">10</span>
    <span class="p3">20</span>
    <span class="p3">30</span>
    <span class="p3">40</span>
    <span class="p3">50</span>
    <span class="p3">60</span>
    <span class="p3">70</span>
    <span class="p3">80</span>
    <span class="p3">90</span>
    <span class="p3">100</span>
    <span class="p3">110</span>
    <span class="p3">120</span>
    <span class="p3">130</span>
    <span class="p3">10</span>
    <span class="p3">20</span>
    <span class="p3">30</span>
    <span class="p3">40</span>
    <span class="p3">50</span>
    <span class="p3">60</span>
    <span class="p3">70</span>
    <span class="p3">80</span>
    <span class="p3">90</span>
    <span class="p3">100</span>
    <span class="p3">110</span>
    <span class="p3">120</span>
    <span class="p3">130</span>
 </div>