CSS how to place column
<p>How to place the columns horizontally using css.</p>

<p>How should be:</p>

<p><a href="https://i.stack.imgur.com/MozvI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MozvI.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;
      First element column 1
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;
       Second element column 1
    &lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td&gt;
        First element column 2
    &lt;/td&gt;
    &lt;td&gt;
        First element column 3
    &lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td&gt;
        Second element column 2
    &lt;/td&gt;
    &lt;td&gt;
        Second element column 3
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>I cannot change markup because all tags is the product of :</p>

<pre><code>@foreach(var computer in department.Computers)
{
  &lt;tr &gt;
      &lt;td&gt;
              @computer.ID
      &lt;/td&gt;
  &lt;/tr&gt;
}

@foreach (var employee in department.Employees)
{
    &lt;tr&gt;
        &lt;td&gt;
            @employee.Text
        &lt;/td&gt;
        &lt;td&gt;
            @employee.Number
        &lt;/td&gt;
    &lt;/tr&gt;
}
</code></pre>