Problema con hover en div html

Por qué estos divs se mueven cuando les hago hover?

html:

<div class="bbb">
  <label class="aaa">
    <input type="radio"> Prueba
  </label>
  </div>
  <div class="bbb">
  <label class="aaa">
    <input type="radio"> Etc
  </label>
  </div>

css:

.aaa{
  border:1px solid red;
  display:block;
  opacity:0.5; }
.bbb{
  margin-bottom:5px;}
.bbb:hover{
  border:1px solid red;
}

html css