JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div style="position: relative">
        <span class="big">Hello</span> <span class="small">World</span>
    </div>
</body>

CSS

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'),  url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v11/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

body {
    font-family: 'Roboto', sans-serif;      
    color: #a39c8d;
    font-weight: bold;
}

span {
    border: 1px solid black;
    display: inline-block;
}

div {
    margin-top: 50px;
    width: 950px;
    border: 1px dotted grey;
}

.big {
    font-size: 36px;
    line-height: 36px;
}

.small {
    font-size: 24px;
    line-height: 36px;
    vertical-align: top;
}