How to display the label and span content in one line?

Question

I am trying to display the label and span content in one line. I tried below code but it's not working. also, I set the width to the label.

In the last label, I have more content as compare to above three. How to set in one line because that is displaying below of the label.

Would you help me out in this?

I need output like this.

html,body{margin: 0;padding: 0;height: 100%;}
.my_office_content{padding: 20px;}
.my_office_content label{width: 250px;font-weight: bold;display: inline-block;}
.my_office_border{border-bottom: 1px solid #ccc;}

<div class="my_office_content">

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,     </span>
  </div>

  <div class="my_office_border">
    <label>Lorem Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem LoremLorem</label>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</span></p>
  </div>

</div>

Answer 1

You are putting last span in <p></p> that's why it's forming block below.

Answer 2

You can use the white-space property:

.my_office_border{
    white-space: nowrap;
}

Answer 3

Put the label inside span

<span><label>Label content</label>,Lorem ipsum dolor sit amet,</span>

Answer 4

You should use float:left for both label and span. Then add width so that they stay in their width.

html,body{margin: 0;padding: 0;height: 100%;}
.my_office_content{padding: 20px;}
.my_office_content label{font-weight: bold;}
.my_office_border{border-bottom: 1px solid #ccc;}
.my_office_border label { float: left; width: 30%; padding-right: 10px; box-sizing: border-box; }
.my_office_border label+span { float:left; width: 70%; }

.my_office_border::after {
    content: "";
    clear: both;
    display: table;
}

<div class="my_office_content">

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,     </span>
  </div>

  <div class="my_office_border">
    <label>Lorem Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem LoremLorem</label>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
</span>
  </div>

</div>

Answer 5

html,body{margin: 0;padding: 0;height: 100%;}
.my_office_content{padding: 20px;}
.my_office_content label{width: 250px;font-weight: bold;}
.my_office_border{border-bottom: 1px solid #ccc; display:table;width:100%}
.my_office_border label{float:left; width:30%;}
.my_office_border span{float:right; width:70%;}

<div class="my_office_content">

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,     </span>
  </div>

  <div class="my_office_border">
    <label>Lorem Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem LoremLorem</label>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
</span>
  </div>
  <div class="my_office_border">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
</span>
  </div>





</div>

Just Change your CSS like this

html,body{margin: 0;padding: 0;height: 100%;}
.my_office_content{padding: 20px;}
.my_office_content label{width: 250px;font-weight: bold;}
.my_office_border{border-bottom: 1px solid #ccc; display:table;width:100%}
.my_office_border label{float:left; width:30%;}
.my_office_border span{float:right; width:70%;}