CSS Radio Button Buttons 将标签文本向上包裹并随其移动块

Question

I am trying to create a list of buttons from modified radio button. However, as soon as the label becomes 2 liner, the block goes up with the label. This is my css code:

.radio-toolbar input[type="radio"] {
  display:none;
}

.radio-toolbar label {
  display: inline-block;
  padding-top: 10px;
  height: 100px;
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  background-color: #fff;
  color:#999;

  -webkit-box-shadow: 0px 5px 0px 0px rgba(204,204,204,0.75);
  -moz-box-shadow: 0px 5px 0px 0px rgba(204,204,204,0.75);
  box-shadow: 0px 5px 0px 0px rgba(204,204,204,0.75);
}

.radio-toolbar input[type="radio"]:checked + label {
  height: 100px;
  width: 100px;
  border: 1px solid #00aaa7;
  border-radius: 5px;
  text-align: center;
  background-color: #00aaa7;
  color:#fff;

  -webkit-box-shadow: 0px 5px 0px 0px rgba(0,170,167,1);
  -moz-box-shadow: 0px 5px 0px 0px rgba(0,170,167,1);
  box-shadow: 0px 5px 0px 0px rgba(0,170,167,1);
}


<div class="radio-toolbar margin-top" ng-repeat="physical in physicals">
  <span class="medium-font fw300 dark-gray">{{ physical.name }}</span><br>
  <span ng-repeat="condition in physical.conditions">
    <input ng-click="physicalExam($parent.$index, physical, condition)" type="radio" name="{{ physical.name }}" id="{{ condition._id }}" value="{{ condition.conditionName }}">
    <label class="small-font fw300 gray" for="{{ condition._id }}">{{ condition.conditionName }}</label>
  </span>
</div>

See JFFIDDLE .

Answer 1

.radio-toolbar label { 
  vertical-align: top;
}

Updated fiddle