title: CSS rules for alignment in separate HTML5
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    font-family: "Open Sans", sans-serif;
    font-weight: 100;
    background-color: #fbfbfb;
  }
  
  body {
    font-family: "Open Sans", sans-serif;
    font-weight: 100;
  }
  
  body h1 {
    font-weight: 100;
  }
  
  body h3 {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
  }
  
  .widget-container {
    width: 100%;
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -47%);
  }
  
  .widget-title {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
  }
  
  .widget-Gtitle {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 13px;
  }
  
  .kpi-container {
    list-style-type: none;
    margin: auto;
    border-spacing: 10px 1px;
    text-align: right;
  }
  
  .kpi-entry {
    text-align: center;
    margin-bottom: 10px;
  }
  
  .kpi-value {
    font-size: 16px;
    text-align: right;
  }
  
  .kpi-Gvalue {
    font-size: 13px;
    text-align: right;
  }
  
  .kpi-Glabel {
    font-size: 13px;
    text-align: right;
  }
  
  .kpi-label {
    font-size: 16px;
    text-align: right;
  }
  
  .kpi-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
  }
  
  .green {
    background: #009c00;
  }
  
  .red {
    background: #ff0000;
  }
  
  .amber {
    background: #FFC200;
  }
  
  .arrowGreen {
    fill: #009c00;
    width: 15px;
    height: 15px;
  }
  
  .arrowRed {
    fill: #ff0000;
    width: 15px;
    height: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;/head&gt;
  
    &lt;ol id="error-list" class="error-list"&gt;&lt;/ol&gt;
    &lt;div id="widget-title" class="widget-Gtitle"&gt;EBIT Margin %&lt;/div&gt;
    &lt;div id="widget-container" class="widget-container"&gt;
      &lt;table class="kpi-container"&gt;
        &lt;tbody&gt;
          &lt;tr class="kpi-entry"&gt;
            &lt;td&gt;
              &lt;div class="kpi-Glabel"&gt;Current&lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div id="ragCurrentBox"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="kpi-icon arrowGreen"&gt;
  &lt;g&gt;
   &lt;g&gt;
    &lt;path id="svgInternalID" d="M446.906,261.969c-1.792-3.656-5.5-5.969-9.573-5.969h-96V10.667C341.333,4.771,336.563,0,330.667,0H181.333    c-5.896,0-10.667,4.771-10.667,10.667V256h-96c-4.073,0-7.781,2.313-9.573,5.969c-1.792,3.646-1.354,8,1.135,11.219    l181.333,234.667c2.021,2.615,5.135,4.146,8.438,4.146s6.417-1.531,8.438-4.146l181.333-234.667    C448.26,269.969,448.698,265.615,446.906,261.969z"&gt;&lt;/path&gt;
   &lt;/g&gt;
  &lt;/g&gt;
  &lt;/svg&gt;&lt;/div&gt;
            &lt;/td&gt;
  
            &lt;td&gt;
              &lt;div id="valueCurrent" class="kpi-Gvalue"&gt;0.58%&lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="kpi-entry"&gt;
            &lt;td&gt;
              &lt;div class="kpi-Glabel"&gt;YTD&lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div id="ragYTDBox"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="kpi-icon arrowGreen"&gt;
  &lt;g&gt;
   &lt;g&gt;
    &lt;path id="svgInternalID" d="M446.906,261.969c-1.792-3.656-5.5-5.969-9.573-5.969h-96V10.667C341.333,4.771,336.563,0,330.667,0H181.333    c-5.896,0-10.667,4.771-10.667,10.667V256h-96c-4.073,0-7.781,2.313-9.573,5.969c-1.792,3.646-1.354,8,1.135,11.219    l181.333,234.667c2.021,2.615,5.135,4.146,8.438,4.146s6.417-1.531,8.438-4.146l181.333-234.667    C448.26,269.969,448.698,265.615,446.906,261.969z"&gt;&lt;/path&gt;
   &lt;/g&gt;
  &lt;/g&gt;
  
  &lt;/svg&gt;&lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div id="valueYTD" class="kpi-Gvalue"&gt;0.57%&lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am having an issue with two html5 widgets on the same page.
  The alignment is off as you can see on both widgets for the subtitles Current and YTD.
  <a href="https://i.stack.imgur.com/0xZIs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0xZIs.png" alt="enter image description here"></a></p>
  
  <p>Could anyone shed some light on this please, here are the CSS rules, they are both the same as they come from same css file. I would like the titles and arrows to line up perfectly even if the right units are a different length e.g 1 and £x.xx.
  <a href="https://i.stack.imgur.com/nuAgw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nuAgw.png" alt="enter image description here"></a></p>