w<div class="box">
  <h1>50% wide</h1>
  <p>This container is <span class="element"></span> pixels wide when the browser is <span class="browser"></span> pixels wide. Resize the browser to see it change.</p>
</div>

html {
  background: #333;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  background-color: white;
  border-radius: 10px;
  height: 200px;
  padding: 20px;
  width: 50%;
}

$( ".element" ).html( $( ".box" ).width() );
$( ".browser" ).html( $( window ).width() );

$( window ).resize(function() {
  $( ".element" ).html( $( ".box" ).width() );
  $( ".browser" ).html( $( window ).width() );
});