<h1></h1>

<h2>Using box-shadows</h2>
<div class="box-shadows">Name Surname</div>

<hr/>

<h2>Using flex</h2>
<div class="flex">
  <span>Name</span><span>Surname</span>
</div>

<hr/>

<h2>Using data-attributes and pseudo-elements</h2>
<div class="dataattributes" data-first="Name" data-last="Surname"></div>
div.box-shadows {
  box-sizing: border-box;
  display: inline-block;
  font-family: monospace;
  font-size: 1rem;
  height: 1rem;
  overflow: hidden;
  padding-top: 1rem;
  text-shadow: -5ch -1rem, 8ch -1rem;
}

/**********/

div.flex {
  display: inline-flex;
  font-family: monospace;
}

div.flex > span {
  inline-block;
  margin-right: 1ch;
}

div.flex span:first-child { order: 2; }
div.flex span:last-child  { order: 1; }

/**********/

div.dataattributes::before {
  content: attr(data-last) ' ';
}

div.dataattributes::after {
  content: attr(data-first);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.