Prevent checkbox from increasing in size when checked

I have a set of checkboxes that depend on user input and are displayed in a flexbox to get the scaling behavior of flexboxes. The problem is, when you check one of the boxes (depending on various factors) it can cause some items to jump to the next line. Like this:

How can I prevent this from happening? When I inspect, I don't actually see a difference in size between a checked and unchecked box, so I'm not quite sure what's causing this?

Here's my jsx:

    <div className="filter-row">
      {values.map(value => {
        return (
          <div key={value}>
            <label className="value-label">
              <input type="checkbox"
                value={value}
                onChange={this.toggleChecked}/>
              {value}
            </label>
          </div>
        )
      })}
    </div>

And here's relevant css:

.filter-row {
  display: flex;
  flex-wrap: wrap;
}

.value-label {
  display: inline-block;
  padding: 10px;
}