title: How to divide this into two elements?
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (max-width: 1000px) {
      #sub { display: none; }
      #sub2 { width:50%; }
      #sub2 &gt; div:nth-of-type(1):before { content: "First Name - "; }
      #sub2 &gt; div:nth-of-type(2):before { content: "Last Name - "; }
      #sub2 &gt; div:nth-of-type(3):before { content: "Middle Name - "; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Main"&gt;
  &lt;section id="sub"&gt;
      &lt;div&gt;First Name&lt;/div&gt;
      &lt;div&gt;Last Name&lt;/div&gt;
      &lt;div&gt;Middle Name&lt;/div&gt;
  &lt;/section&gt;
  &lt;section id="sub2"&gt;
      &lt;div&gt;foo first&lt;/div&gt;
      &lt;div&gt;foo Last&lt;/div&gt;
      &lt;div&gt;foo Middle&lt;/div&gt;
  &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When the screen size is of a mobile, I apply css that hides the <code>#sub</code> and put the width of <code>#sub2</code> as <code>50%</code>. Then I use <code>div:nth-of-type(1):before {content: "First Name - "; }</code> etc to display the sub headers before the values. Everything works, but the result is something like this:</p>
  
  <pre class="lang-none prettyprint-override"><code>First Name - first
  Last Name - Last
  Middle Name - middle
  </code></pre>
  
  <p>I cannot align the values because what ever style I am setting it's going for the entire "First Name - first". Not just the value "first". How can I fix this?</p>