title: CSS Line Dividor
body: <p>I'm trying to organize two sets of information in a particular way. I have a very crude mock-up here:</p>
  
  <p><a href="https://imgur.com/a/LrSCg" rel="nofollow noreferrer">https://imgur.com/a/LrSCg</a></p>
  
  <p>I have everything working except for the diving line between the two sets of info. I've tried setting up the entire thing as a table and then setting the appropriate border styles, but that didn't work out so well.</p>
  
  <p>Here's what I currently have that gets me everything except the middle dividing line:</p>
  
  <pre><code>&lt;table style="margin: 0 auto; border: 1px solid black; table-layout: fixed"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img id="left_image" class="images" alt="left_image" height="auto" width="300" style="border: 2px solid #5b5b5b"&gt;
          &lt;/td&gt;
          &lt;td style="display:block;"&gt;
              &lt;div style="float: left; margin: 20px 0 0 20px;"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td style="width: 75px;"&gt;Name:&lt;/td&gt;&lt;td&gt;&lt;span id="left_name" style="font-weight: bold"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style="width: 75px;"&gt;Category:&lt;/td&gt;
                          &lt;td&gt;&lt;span id="left_category" style="font-weight: bold"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style="width: 75px;"&gt;ID:&lt;/td&gt;
                          &lt;td&gt;&lt;span id="left_id" style="font-weight: bold;"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
              &lt;hr&gt;
  
              &lt;div style="float: right; margin: 100px 20px 0 0;"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td style="width: 75px;"&gt;Name:&lt;/td&gt;
                          &lt;td&gt;&lt;span id="right_name" style="font-weight: bold"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style="width: 75px;"&gt;Category:&lt;/td&gt;
                          &lt;td&gt;&lt;span id="right_category" style="font-weight: bold"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style="width: 75px;"&gt;ID:&lt;/td&gt;
                          &lt;td&gt;&lt;span id="right_id" style="font-weight: bold"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td&gt;
              &lt;img id="right_image" class="images" alt="right_image" height="auto" width="300" style="border: 2px solid #5b5b5b"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td style="text-align: center;"&gt;
              &lt;button class="btn4 btn4-confirm" onclick="selectLeftID()"&gt;Select Left&lt;/button&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td style="text-align: center;"&gt;
              &lt;button class="btn4 btn4-confirm" onclick="electRightID()"&gt;Select Right&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This is just experimental code, it hasn't been cleaned up yet, so please ignore all the in-line styling.</p>
  
  <p>Here's a sloppy example I threw together: <a href="https://jsfiddle.net/33pc23w0/2/" rel="nofollow noreferrer">https://jsfiddle.net/33pc23w0/2/</a></p>
  
  <p>I would like to make the line in code and not use any images since I'd like the elements to be flexible in size. Any suggestions on the middle lines?</p>