How to Prevent long text label wrapping under the checkbox/radio button?

Question

Sample Markup 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>

Note: I know i can just wrap the checkbox inside the label to fix that but starting from the "indi-wrap" class its auto populated inside the parent "wrap" therefor I can't edit anything inside the "indi-wrap".

Is there any way to align the second line of the text label on it's first line? Preventing it wrapping under the checkbox.

Answer 1

You can use flexbox to achieve this.

.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>

Answer 2

Keeping the existing markup, one simple way to achieve something close is using inline-block on the 3 children of .indi-wrap, and a max-width to fit them all in a single line.

.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>