I'm trying to load a div with diacritics on top of a div without. The spacing isn't working out like I though. (See the snippet below.) How can I fix this?

```css
div.text {
     width: 75%;
     position: relative;
 }
 div.diacritics {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
      z-index: -1;
      color: red;
 }
```

```html
<div class="text">String String String String String String String String String String
 <div class="diacritics">
  Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
  </div>

<div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
 <div class="diacritics">
  Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
  </div>
```