Middle box centered variable width, left and right float directly attached

Question

I\'m designing my own Anki-Flashcards for learning Japanese:

I have three boxes of variable size in a line. The middle one should be centered and has a variable width. T

Answer 1

Thanks to Paulie_D and the Topic here, I came up with a solution:

HTML:

<div class="card">
 <div class="container">

  <span class="left">
   Note (e.g. uncommon): 
  </span>
  <span class="middle">
   Alt JP Pronounciation
  </span>
  <span class="right">
   Alt audio button
  </span>
 </div>
</div>

CSS:

.right {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: left;
}

.left {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: right;
}

.middle {
 border: 1px solid;
}

.container {
 display: flex;
}

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
 text-align: center;
}

Answer 2

.right {
  float:left;
  border: 1px solid;
}
.middle {
  margin-left:3px;
  float:left;
  border: 1px solid;
}