Showing <h1> <h5> text inline using css

Question

I want to show "Sentiment analysis" such that S should be much larger then h5 text.

What's wrong with follwing code:

HTML:

<h1>S</h1> <h5>entiment Analysis</h5>      

CSS:

h1 {
    margin-left: 36%;
    color:#C0C0C0;
    font-family: "calibri";
    text-decoration:underline;
    white-space: pre;
}

h5 {
    margin-left: 36%;
    color:#C0C0C0;
    font-family: "calibri";
    text-decoration:underline;
    white-space: pre;
}

Live code in CodePan

Answer 1

That's a messy code. If you just want to make the first letter Bigger, You can try the following.

Working Demo

HTML

<div>Sentiment analysis</div> 

CSS

div:first-letter {
  font-size:30px;
  font-weight:bold;
}