对于你的innerHTML，你应该把它们输出到列表<ul><li></li></ul>中

首先，出于安全性和性能方面的考虑，你应该尽可能避免使用innerHTML。而且，当你正在处理的文本不包含任何HTML时，你绝对不应该使用.innerHTML，而应该使用.textContent。然后，在你的JavaScript字符串中，你可以使用转义码来新建一行：\n。
此外，您使用h1是不正确的。标题元素（h1...h6）应该用于设置文档结构，而不是因为它们样式化文本的方式。因此，页面上应该很少有多个h1。
最后，对于你的问题，如果你简单地将每一段数据放入它自己的span元素中，并使用CSS将这些span设置为inline-block，那么你可以为元素中包含的两列数据设置一个宽度，你就可以设置好了：

// Use \n within the string to force a new line
document.getElementById("department").textContent = "TEMP TEXT";
document.getElementById("location").textContent =  "TEMP TEXT";
document.getElementById("people").textContent =  "TEMP TEXT\nMORE TEXT";
document.getElementById("phone").textContent =  "555-666-7777\n888-999-0000";

/* Allow the selected SPAN elements to allow for block level formatting
   while still being inline elements. */
span.a, span.category { display:inline-block; }

/* Set widths and styling of specific SPANS */
span.category { width:150px;}
span.a{
    width: 100px;
    background-color: yellow;
    border:1px solid black;
}

<!-- put each piece of data into its own SPAN -->
<div><span class="category">DEPARTMENT: </span><span class="a" id="department"></span></div>
<div><span class="category">LOCATION: </span><span class="a" id="location"></span></div>
<div><span class="category">INDIVIDUAL: </span><span class="a" id="people"></span></div>
<div><span class="category">PHONE: </span><span class="a" id="phone"></span></div>

你的代码呈现的方式，看起来更像是一个定义列表和一堆标题。

dl {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;
  overflow: visible;
}

dt, dd {
  flex: 50%;
}

dd {
  margin-left: auto;
}

dt {
  font-weight: bold;
}

<dl>
  <dt>DEPARTMENT:</dt>
  <dd>AA</dd>

  <dt>LOCATION:</dt>
  <dd>BB 1<br/>BB 2<br/>BB 3</dd>

  <dt>INDIVIDUAL:</dt>
  <dd>CC 1<br/>CC 2<br/>CC 3</dd>

  <dt>PHONE:</dt>
  <dd>DD</dd>
</dl>