CSS reduces width when text wraps in multi-line

Question

I create a list widget where I have several <li>with two related items.

A <span>for the title and a <div>for the bottom line. This line should vary depending on the width of their adjacent span element.

.limit-area {
  width: 250px;
  height: 350px;
  background-color: #96ceb4;
}
.limit-area ul {
  font-size: 0;
  list-style-type: none;
  -webkit-padding-start: 0;
}
.limit-area ul li {
  background-color: #ffeead;
  display: table;
  margin-bottom: 20px;
}
.limit-area ul li .wrapper span {
  font-size: 24px;
  color: #010101;
}
.limit-area ul li .wrapper .line {
  height: 6px;
  margin-top: 12px;
  background-color: #ff6f69;
}

<div class="limit-area">
  <ul>
    <li>
      <div class="wrapper">
        <span>One line only</span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
        <span>Bigger one line only </span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
      <span>Long line and go crazyyyyyy</span>
      <div class="line"></div>
    </div>
  </li>
  </ul>
</div>

Run codeHide result

Full jsfiddle example: https://jsfiddle.net/arnauth/55josw6e/

In the above example, I can easily complete my task in the first two elements of the list.

The trick here is to have the same effect when I have a long line that breaks into two or more lines - this third line is an example.

, "", , .

, CSS, javascript.

.

Answer 1

width:200px; .wrapper. CSS:

.limit-area {
  width: 250px;
  height: 350px;
  background-color: #96ceb4;
}
  
ul {
font-size: 0;
list-style-type: none;
-webkit-padding-start: 0;
}

li {
  background-color: #ffeead;
  display: table;
  margin-bottom: 20px;}

.wrapper {
  width:200px;
}

span {
  font-size: 24px;
  color: #010101;
}

.line {
  height: 6px;
  margin-top: 12px;
  background-color: #ff6f69;
}

<div class="limit-area">
  <ul>
    <li>
      <div class="wrapper">
        <span>One line only</span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
        <span>Bigger one line only </span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
      <span>Long line and go crazyyyyyy</span>
      <div class="line"></div>
    </div>
  </li>
  </ul>
</div>

Hide result

Answer 2

:

border-bottom: 6px solid #ff6f69;

:

span {
          font-size: 24px;
          color: #010101;
          border-bottom: 6px solid #ff6f69;
        }

: https://jsfiddle.net/55josw6e/3/

, .