How can I keep a row of a button and text from wrapping using multicol?

Question

I have a series of rows consisting of a button and text, like so:

[Button] [Text]
[Button] [Text]
[Button] [Text]
...

When I apply the multicol class, they eventually wrap around, like so:

[Button] [Text]   [Button] [Text]
[Button] [Text]   ....

Unfortunately, in many cases, the button or the text gets broken in half when going into the next column. Using "display: inline-block" makes my buttons and text vary in size on different screen resolutions, and makes them spaced strangely.

What is the best way to keep the [Button] [Text] combination from breaking in the column, while keeping each [Button] [Text] combination equally spaced, and looking the same?

.multicol {
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- Imagine 20-25 of these in a row -->
  <div class='multicol'>
     <div class='row'>
         <div class='col-xs-5'>
              <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
          </div>
          <div class='col-xs-7'>
               <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
           </div>
      </div>
  </div>

Answer 1

First of all, added white-space: normal to the button to override the default nowrap from bootstrap's btn class.

Unfortunately, in many cases, the button or the text gets broken in half when going into the next column. Using "display: inline-block" makes my buttons and text vary in size on different screen resolutions, and makes them spaced strangely.

Well, you can avoid the breaking to the next column by using:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */

and makes them spaced strangely

Add column-gap: 0 to remove the default column gaps.

.multicol {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-gap: 0;
}

.multicol button {
  white-space: normal;
}

.multicol>.row {
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
}

/*for illustration*/
.multicol>.row>* {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Imagine 20-25 of these in a row -->
<div class='multicol'>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
</div>

Now you can add in some flexboxes here to suit your case - see demo below:

.multicol {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-gap: 0;
}

.multicol button {
  white-space: normal;
}

.multicol>.row {
  display: flex; /*NEW*/
  margin: 0; /*NEW*/
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
}

.multicol p { /*NEW*/
  height: 100%;
}

/*for illustration*/
.multicol>.row>* {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Imagine 20-25 of these in a row -->
<div class='multicol'>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
</div>