is it possible to use JS to align two different text sizes to be centered on the same line horizontally? 

```css
.big {
    font-size: 60px;
}

.small {
    font-size: 20px;
}
```

```html
<div class="parent">
    <span class="big">ABCD.EF</span>
    <span class="small">ABC</span>
</div>
```

Difficult thing is: I need this to be achieved dynamically as ABCD.EF could change to more or less number of characters (ie it could be ABC.DE or A.BC...) 

Thanks!