How to prevent the transfer of a long text label under a checkbox / radio button?

Question

Markup Example and CSS

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
}

.control-label {
  display: inline;
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

Run codeHide result

Note: I know that I can simply wrap the checkbox inside the label to fix this, but starting from the class "indi-wrap", it automatically populates inside the parent "wrap", so I can’t edit anything inside the "indi-wrap".

Is there a way to align the second line of a text label on the first line? Preventing it from wrapping under the flag.

Answer 1

, - - inline-block .indi-wrap a max-width, .

.indi-wrap > * {
    display: inline-block !important;
    max-width: 70%;
    vertical-align: top;
}

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
  display: block;
}

.indi-wrap > * {
    display: inline-block !important;
    max-width: 70%;
    vertical-align: top;
}
.control-label {
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

Hide result

Answer 2

- , display:block , , ,

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
}

label.control-label {
  display:block;
  font-weight: 300;  
    margin-left: 20px;
}
input{  
    float: left;
    margin-left: -20px !important;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
  <div class="indi-wrap">
    <label class="control-label">
    <input type="checkbox" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
    <button type="button" class="btn btn-link">only</button></label>
  </div>
  <div class="indi-wrap">
    <label class="control-label">
    <input type="checkbox" />Xonsectetur adipiscing.
    <button type="button" class="btn btn-link">only</button></label>
  </div>
  <div class="indi-wrap">
    <label class="control-label">
    <input type="checkbox" />Sed do eiusmod tempor incididunt ut labore.
    <button type="button" class="btn btn-link">only</button></label>
  </div>
</div>

Hide result

Answer 3

-

.wrap {
  width: 220px;
}

.indi-wrap {
  position: relative;
  padding-bottom: 10px;
}

.indi-wrap input[type='checkbox'] {
  position: absolute;
  left: 0;
}

.control-label {
  padding-left: 20px;
  font-weight: 300;
  font-size: 14px;
  display: block
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 14px;
  padding-left: 20px;
}

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

Hide result

Answer 4

flexbox .

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
  display: flex;
  align-items: flex-start;
}
.indi-wrap input { flex: 1; }
.indi-wrap label { flex: 7; }

.control-label {
  display: inline;
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

Hide result