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:

 


  
   Note (e.g. uncommon): 
  
  
   Alt JP Pronounciation
  
  
   Alt audio button
  
 

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;
}