Responsive progress bar

Question

I want to make a responsive password strength bar with text. On bigger size of input ,it makes a big space after progress-bar and text.

You can see it in my JSFiddle (Just change a size of example window)

And there is the code

.password-strength{
    width: 100%;
    margin-top: 10px;
}

.password-strength>span{
    background: transparent!important;
    width: 35%;
    display: inline-block;
    text-align: right;
}

.progress-bar{
    width: 80%;
    height: 1px;
    background: #dedede;
    display: -webkit-inline-box;
    width: 63%;
    height: 1px;
    background: #dedede;
}

.progress-bar>div{}

.progress-bar .danger, .password-strength .danger{
    background: #f2373e;
    color: #f2373e;
}

.progress-bar .acceptable, .password-strength .acceptable{
    background: #64aa64;
    color: #64aa64;
}

.progress-bar .strong, .password-strength .strong{
    background: #0099ff;
    color: #0099ff;
}

.input-field{
    max-width: 100%;
    position: relative;
    margin: 60px auto;
}

.input-field-width{
    border: 1px solid black;
    width: 100%;max-width:700px;height: 45px;
}

@media(max-width:250px){
  .progress-bar{width:100%}
}

<div class="input-field">
			<div class="input-field-width"></div>

			<div class="password-strength-overflow">

				<div class="password-strength">
					<div class="progress-bar"><div class="danger" style="width:30%;"></div></div>
					<span class="danger">Very weak</span>
				</div>

			</div>
		</div>

Any suggestions what I need to do?

Answer 1

Add below style

.progress-bar{
    width: calc(100% - 80px);
}

Remove width from span

.password-strength>span{
    background: transparent!important;
    display: inline-block;
    text-align: right;
}

Here is the demo https://jsfiddle.net/z2qtuvnt/2/