Set div to have its siblings width

Answer 1

Here is still a flexbox-based approach.

The essential idea: in an outermost wrapper, elements that need to be of equal width are wrapped into another wrapper.

.wrapper {
  display: inline-block;
}

.flex-wrapper {
  display: flex;
  flex-direction: column;
}

.demo-bar {
  height: 4px;
  background-color: deepskyblue;
}

  

    
Some editable text.
    

  

Another practical example: an adaptive progress bar with the same width below a media (video or audio) element.

video.addEventListener("timeupdate", () =>
  progress.style.width = `${video.currentTime / video.duration * 100}%`
)

.wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}

video {
  display: block;
  max-width: 100%;
}

.progress-bar {
  height: 0.25rem;
  background: #555;
}

#progress {
  width: 0%;
  height: 100%;
  background-color: #595;
}