-1

So I have a weird situation. Setting up a page to generate labels for printout.

Here is what I currently have:

<div class="rowoftags">
    <div class="col1">
        <p class="firstname">Jill</p>
        <p class="lastname">Smith</p>
        <p class="position">Web Developer</p>
        <p class="company">Company A</p>
        <p class="city">Denver, </p>
        <p class="state">CO</p>
    </div>
    <div class="col2">
        <p class="firstname">Jordan</p>
        <p class="lastname">Smith</p>
        <p class="position">Web Developer</p>
        <p class="company">Company B</p>
        <p class="city">Denver, </p>
        <p class="state">CO</p>
    </div>
</div>

How do I move the paragraphs City and State next to each other with CSS so Denver, CO is on same line while other lines stand correct?

RDudek
  • 23
  • 3
  • 1
    `p` is a block element. block element take the full horizontal space available. try changing display property to inline or inline-block for city and statement paragraphs. – gp. Nov 26 '17 at 04:05
  • display: inline worked! Thanks! – RDudek Nov 26 '17 at 04:07

1 Answers1

0

Simply Change p to span ,it is generate labels for printout

<div class="rowoftags">
    <div class="col1">
        <p class="firstname">Jill</p>
        <p class="lastname">Smith</p>
        <p class="position">Web Developer</p>
        <p class="company">Company A</p>
        <span class="city">Denver, </span>
        <span class="state">CO</span>
    </div>
    <div class="col2">
        <p class="firstname">Jordan</p>
        <p class="lastname">Smith</p>
        <p class="position">Web Developer</p>
        <p class="company">Company B</p>
        <span class="city">Denver, </span>
        <span class="state">CO</span>
    </div>
</div>
Hiren Vaghasiya
  • 5,454
  • 1
  • 11
  • 25