JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<div id="logo">
  <a href="#">
    <h1>ABC<br><span class="h1b">HIJ</span></h1>
  </a>
</div>

<section id="topMessage" class="top-message serif">
  <div class="section-outer">
    <div class="section-inner">
      <div class="home-container cscontainer">
        <div class="section-header fade-right ttf-fast-too-slow obs">
          <h2 class="stocker-title">
            <span class="stocker-sub-title">
            </span>
          </h2><!-- .stocker-title -->
        </div><!-- .section-header -->
        <div class="section-body">
          <div class="body-top-image"></div><!-- .body-top-image -->
          <div class="ceo-name-label">
            <span class="ceo-title"></span>
          </div><!-- .ceo-title -->
          <div class="body-description"></div><!-- .body-description -->
        </div><!-- .section-body -->
        <div class="title-back skew mblue"></div>
      </div><!-- .cscontainer -->
    </div><!-- .section-inner -->
  </div><!-- .section-outer -->
</section><!-- #topMessage -->

CSS

#logo{
  font-family: "arial", "times", "sans-serif";
  width: 128px;
  height: 100%;
  background-color: #336699;
  float: left;
}
#logo a{
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
}
#logo h1{
  margin: 0px;
  padding: 26px 30px;
  text-align: center;
  text-transform: uppercase;
  font-kerning: none;
  display: block;
  color: white;
}
.h1b {
  letter-spacing: 3.25px;
}

JavaScript

let v = [5, 1];
let w = [-2, 3];
v = normalize(v);
w = normalize(w);

let dotValue = dot(v, w);

let rad = Math.acos(dotValue);
let deg = rad / Math.PI * 180;


let e = document.querySelector("div a h1");
e.innerHTML = rad + '<br><span class="h1b">' + deg + '</deg>';

function normalize(v) {
	let len = Math.sqrt(v[0] * v[0] + v[1] * v[1]);
  return [v[0] / len, v[1] / len];
}

function dot(v0, v1) {
	return (v0[0] * v1[0]) + (v0[1] * v1[1]);
}