text is shown in two line in flex display

I have a text inside of div , the div has 100% width , I want to have the text in one line rest of the div fills up with middle line till end of the row

 .question-category-sub {    
      display: flex;
    }

    .lineHorizontal__container {
        align-items: center;
        display: flex;
        height: 80px;
    }

    .lineHorizontal {
       border-top: 1px solid rgb(30, 30, 30);
       width: 100%;
     }

 <div class="lineHorizontal__container">
          <div class=" question-category-sub">
              Art - Music
          </div>
          <div class="lineHorizontal">                 
          </div>                  
       </div>

      

   <div class="lineHorizontal__container">
      <div class=" question-category-sub">
          Art - Music
      </div>
      <div class="lineHorizontal">                 
      </div>                  
   </div>

   .question-category-sub {    
  display: flex;
  }

.lineHorizontal__container {
    align-items: center;
    display: flex;
    height: 80px;
}

.lineHorizontal {
   border-top: 1px solid rgb(30, 30, 30);
   width: 100%;
 }

but Art – music are shown in two lines
how can I make Art-Music and the middle line (which should be extended to end of row) in one line. and I should add the text "Art-Music" is dynamic, so it has the dynamic length

>Solution :

You should add flex-shrink of 0 to your question-category-sub:

.question-category-sub{
    flex-shrink: 0;
}