Form form and field no different lines

[login1]

Hi, I have the below HTML being used at https://02.funkytwig.com/section/lighting/. It gives me the text ’
Products 1 - 10 from 17. Products on page’ and a drop-down to select the number of products per page. The problem is the text is on one line and the drop-down on the next. I want both to be on the same line. I need to do this using HTML on the no-of-pages class as it is from a plugin so I can’t change the HTML.

<div class="no-of-pages">
   <form action="/section/lighting/gel-frames-barn-droors/" method="POST">
      Products <strong>1 - 8</strong> from <strong>8</strong>. Products on page 
      <select name="wcj_products_per_page" id="wcj_products_per_page" class="sortby rounded_corners_class" onchange="this.form.submit()">
         <option value="10" selected="selected">10</option>
         <option value="25">25</option>
         <option value="50">50</option>
         <option value="100">100</option>
         <option value="-1">All</option>
      </select>
   </form>
</div>

Regards,
Ben

[Ray.H]

@login1

I need to do this using HTML on the .no-of-pages class as it is from a plugin so I can’t change the HTML.

Hi, that’s not a problem. Just use the good ole descendant selector.

Something like this should get you started, you may want to tweak the width to your liking.

.no-of-pages select {
    display: inline-block;
    max-width: 6em; /*override flatsom.css:1*/
    vertical-align: baseline;
    margin: 1em .5em 0;
    height: auto; /*override flatsom.css:1*/
}