<main>
  <ul>
    <li>
      <div class="key"><span>DS Nick Bailey</span></div>
      <div class="value"><span>Rafe Spall</span></div>
    </li>
    <li>
      <div class="key"><span>Sarah Bailey</span></div>
      <div class="value"><span>Annabel Scholey</span></div>
    </li>
    <li>
      <div class="key"><span>Tracy Daszkiewicz</span></div>
      <div class="value"><span>Anne-Marie Duff</span></div>
    </li>
    <li>
      <div class="key"><span>Tody Daszkiewicz</span></div>
      <div class="value"><span>Judah Cousin</span></div>
    </li>
    <li>
      <div class="key"><span>Dawn Sturgess</span></div>
      <div class="value"><span>Myanna Buring</span></div>
    </li>
    <li>
      <div class="key"><span>Charlie Rowley</span></div>
      <div class="value"><span>Johnny Harris</span></div>
    </li>
    <li>
      <div class="key"><span>DCC Paul Mills</span></div>
      <div class="value"><span>Nigel Lindsay</span></div>
    </li>
    <li>
      <div class="key"><span>Caroline Sturgess</span></div>
      <div class="value"><span>Stella Gonet</span></div>
    </li>
    <li>
      <div class="key"><span>Gracie Sturgess</span></div>
      <div class="value"><span>Sophia Ally</span></div>
    </li>
  </ul>
  <button id="randomise">Randomise</button>
</main>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
  --random: 0;  
}

body {
  background: black;
  color: white;
  font-family: 'Open Sans', sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 25px;
  margin: 15px;
}

.key {
  text-align: right;
}

.value > span {
  position: relative;
  color: black;
  text-transform: uppercase;
  font-size: 0.9em;
}

.value > span::before {
  content: '';
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transform: scale(1.15) translate(calc(var(--random) * 4px), calc(var(--random) * 2px)) rotateZ(calc(var(--random) * 2deg));
}

button#randomise {
  background: white;
  border: none;
  font-size: 1.1em;
  transform: rotateZ(calc(var(--random) * 4deg));
  margin: 20px
}

function randomise() {
  document
    .querySelectorAll('.value')
    .forEach(el => {
      el.style
        .setProperty(
          '--random',
          Math.random() * 2 - 1
        );
    });
}
randomise();

document
  .getElementById('randomise')
  .addEventListener('click', randomise);