title: How to make two rows in table in html 50% 50% with css?
body: <p>I want that 2 rows in my table are equaly. 50% width one and 50% width second.
  Now first row is smaller because there is less text in it.</p>
  
  <p>I need that there will be table on site full 100% width and then left and right row that should be equal. I hope you understand what i mean.</p>
  
  <p>This is my code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;style&gt;
      table {
        width: 100%;
      }
      
      td,
      th {
        text-align: left;
      }
      
      .awesome {
        text-align: right;
        padding-right: 20px;
        vertical-align: top;
        padding-top: 20px;
      }
      
      #prostorzaobrazec {
        vertical-align: top;
        padding-top: 20px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th id="left"&gt;Some text&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
  
  
        &lt;th id="right"&gt;Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
  
      &lt;/tr&gt;
  
    &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>