Comment faire développer/effondrement bootstrap 3 horizontal stricly

Question

J'utilise bootstrap 3. Mon idée est de développer/réduire en cliquant sur un bouton quelques mots entre d'autres termes (transcriptions dans le dictionnaire).

Les mots et les transcriptions entre eux ont tous la classe display: "inline-block". C'est là un moyen de faire une transition strictement horizontale, et d'éviter cet affichage: "bloquer" une partie de celui-ci? Le titre du panneau doit toujours être sur une ligne. (Et éviter d'écrire js supplémentaires)

 <div class="panel-heading"> 
      <div class="note">{{note}} </div> 
      <div class="word -arabic-text-big">{{word}}</div> 
      <div class="collapse transcription">[******]</div> 
     </div> 
     <button type="button" class="btn btn-info" 
      data-toggle="collapse" data-target=".transcription"> 
     Transcipt 
     </button> 

Answer 1

Désolé, la réponse était trop simple. Mais avant j'ai fait quelque chose de mal ...

.note, .word, .transcription { 
    display: inline-block; 
} 

.transcription.collapse.in { 
    display: inline-block; 
} 
.transcription.collapse { 
    display: none; 
}