title: Align text columns in javascript alert
body: <p>I have a javascript alert where I'm showing pairs of values one per line in a box that asks the user to confirm that they want to delete a record. </p>
  
  <p>Something like this:</p>
  
  <pre><code>header1: value1   
  header2: value2   
  header3: value3
  </code></pre>
  
  <p>The problem is when the header's can greatly vary in length. Something like:</p>
  
  <pre><code>h1: value1
  longlongheader2: value2
  </code></pre>
  
  <p>I can't make any useful assumptions about the length of the headers. But I need "value2" to be directly below "value1". </p>
  
  <p>I can't use the length of the string, since visually <code>O</code> is <strong>much</strong> bigger than <code>i</code>. Does javascript have a way to measure font metrics?</p>
  
  <p>I was surprised that I couldn't find an answer to this. Everything I'd seen was specific for other languages, or everyone had recommended libraries. </p>
  
  <p>I should also point out, that I'd prefer not to include any libraries for this. Currently running standard JQuery, but not JQueryUI.</p>