Span vs Div width of parent

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <span style="background-color:red; width: 50%;">Text</span>
    <div style="background-color:blue; width: 50%;">Text</div>
  </body>

</html>

// Code goes here

/* Styles go here */