Начинающий-Js-кодер,
 
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
      position: relative;
  }
   div.test {
      border: 2px solid green;
      display: inline;
      padding: 0 5px;
      text-align: center;
      position: absolute;
   }
  </style>
</head>
<body>
  <script>
    function fn(str, left)
    {
      var container = document.createElement("div")
      container.appendChild(document.createTextNode(str));
      document.body.appendChild(container);
      container.classList.add("test");
      container.style.left = left + "px"
      return container.offsetWidth
    }
    var arr = 'hello world hi javascript forum'.split(' '), left = 0;
    arr.forEach(function(it) {
      left += fn(it,left) + 30;
    });
  </script>
</body>
</html>