After following an online tutorial, I managed to put together the following HTML template:
body {
font-weight: 200;
font-size: 14px;
}
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
/* text-align: right;*/
padding: 10px 20px 0px 20px;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: left !important;
/*margin-left: 40%;*/
}
.hrItem {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #fff; /* Modern Browsers */
} <div class='wrapper'>
<div class='header'>
<p class='title'>Invoice #<hr class='hrItem' /> </p>
</div>
<div>
<div class='details'>
Bill to: <br/>
Amount: <br/>
Date:
</div>
</div>Encountering an issue, I found that there was a substantial white space between 'Invoice #' and the horizontal rule which I struggled to remove. I experimented with adjusting the padding and margin within various CSS classes such as .hrItem, .title, and .header, but the problem persisted. As such, I am unsure if it is possible to eliminate this white space or if I need to explore alternative methods of incorporating the horizontal line.