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;
}
...
<html>
<head>
</head>
<ol id="error-list" class="error-list"></ol>
<div id="widget-title" class="widget-Gtitle">EBIT Margin %</div>
<div id="widget-container" class="widget-container">
<table class="kpi-container">
<tbody>
<tr class="kpi-entry">
<td>
<div class="kpi-Glabel">Current</div>
</td>
<td>
<div id="ragCurrentBox"><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">
<g>
...
</html>I am experiencing a problem with the alignment of two HTML5 widgets on the same page. The subtitles "Current" and "YTD" are not lining up properly on both widgets. https://i.sstatic.net/0xZIs.png
Could someone please provide some insight on this issue? Below are the CSS rules for both widgets, which are identical since they are from the same CSS file. I would like the titles and arrows to align perfectly, even if the values on the right side have different lengths, such as "1" and "£x.xx". https://i.sstatic.net/nuAgw.png