html - How to adjust element width dynamically using jQuery or SCSS -

this first stackoverflow question, please patient.

the problem that, each time browser being resized, image overflowing on text.

how can fix dashed element more responsive rather manually adding media queries? thank you!

.romanweek-tablewrapper {    border: 2px solid #000;    padding: 20px 30px;    margin: 40px auto;    display: table;    width: 85%;  }  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist {    display: table;    width: 85%;    margin: 0 auto;  }  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 {    font: 400 16px lato;    width: 100%;    display: inline-block;  }  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule {    text-transform: uppercase;    position: relative;    float: left;  }  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {    content: '';    position: absolute;    border: 1px dashed rgba(0, 0, 0, 0.5);    bottom: 5px;    width: 95px;    left: 7em;    transition: 1s ease;  }  @media screen , (max-width: 1850px) {    .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {      width: 75px;    }  }  @media screen , (max-width: 1700px) {    .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {      width: 65px;    }  }  @media screen , (max-width: 1600px) {    .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {      width: 55px;      left: 6em;    }  }  @media screen , (max-width: 1400px) {    .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {      width: 35px;    }  }  @media screen , (max-width: 1300px) {    .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {      width: 25px;    }  }  @media screen , (max-width: 1200px) {    .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {      width: 15px;    }  }  @media screen , (max-width: 1100px) {    .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {      width: 0;    }  }  @media screen , (max-width: 991px) {    .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {      width: 250px;    }  }  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-item-description {    float: right;    text-align: left;    width: 40%;  }

<div class="romanweek-tablewrapper">    <div class="table-header-wrapper">      <h1 class="text-blue section-heading">roman week</h1>    </div>    <div class="menu-list-wrapper">      <ul class="romanweek-menulist">        <li>          <h4 class="menu-item"><span class="menu-schedule">lunedi</span><span class="menu-item-description">we're closed<br> - you're cooking.</span></h4></li>        <li>          <h4 class="menu-item"><span class="menu-schedule">martedi</span><span class="menu-item-description">fettuccine</span></h4></li>        <li>          <h4 class="menu-item"><span class="menu-schedule">mercoledi</span><span class="menu-item-description">coniglio</span></h4></li>        <li>          <h4 class="menu-item"><span class="menu-schedule">geovedi</span><span class="menu-item-description">gnocchi</span></h4></li>        <li>          <h4 class="menu-item"><span class="menu-schedule">venerdi</span><span class="menu-item-description">baccala</span></h4></li>        <li>          <h4 class="menu-item"><span class="menu-schedule">sabato</span><span class="menu-item-description">vitello</span></h4></li>        <li>          <h4 class="menu-item"><span class="menu-schedule">domenica</span><span class="menu-item-description">lasagna</span></h4></li>      </ul>    </div>  </div>

here link of element http://prntscr.com/gkwbcm

try this:

<style class="cp-pen-styles">     ul.romanweek-menulist {         list-style: none;     }     ul.romanweek-menulist      li .menu-schedule {         width: 8%;         display: inline-block;     }     span.menu-item-description {         width: 20%;         display: inline-block;         vertical-align: middle;         margin-left: 20px;     }      .dashed {         content: '';         width: 68%;         display: inline-block;         border-bottom: solid 1px dashed #333;         border-bottom: 1px dashed rgba(0, 0, 0, 0.5);         vertical-align: middle;     }     </style>         <div class="romanweek-tablewrapper">             <div class="table-header-wrapper">                 <h1 class="text-blue section-heading">roman week</h1>             </div>             <div class="menu-list-wrapper">                 <ul class="romanweek-menulist">                     <li><h4 class="menu-item"><span class="menu-schedule">lunedi</span><span class="dashed"></span><span class="menu-item-description">we're closed<br> - you're cooking.</span></h4></li>                     <li><h4 class="menu-item"><span class="menu-schedule">martedi</span><span class="dashed"></span><span class="menu-item-description">fettuccine</span></h4></li>                     <li><h4 class="menu-item"><span class="menu-schedule">mercoledi</span><span class="dashed"></span><span class="menu-item-description">coniglio</span></h4></li>                     <li><h4 class="menu-item"><span class="menu-schedule">geovedi</span><span class="dashed"></span><span class="menu-item-description">gnocchi</span></h4></li>                     <li><h4 class="menu-item"><span class="menu-schedule">venerdi</span><span class="dashed"></span><span class="menu-item-description">baccala</span></h4></li>                     <li><h4 class="menu-item"><span class="menu-schedule">sabato</span><span class="dashed"></span><span class="menu-item-description">vitello</span></h4></li>                     <li><h4 class="menu-item"><span class="menu-schedule">domenica</span><span class="dashed"></span><span class="menu-item-description">lasagna</span></h4></li>                 </ul>             </div>         </div>