Text at Left side and Right Side in HTML Page

I want the HTML output similar like this -

My First Sentence My Second Sentence

So, my code is -

<h3> <span>My first sentence</span> <a href="#">My second sentence </a> </h3>

and the output was -

My First SentenceMy Second Sentence

So I added "margin-left: 100px" to the element and then the output was in next line-

My First Sentence My Second Sentence

Please guide me through this.Most probably some other css is overwriting it and I need to know how can I get the view what I want. My current code looks like -

<h3> <span>My first sentence</span> <a href="#">My second sentence </a> </h3>

4 Answers

i see 3 options(you used float already) with display and text-align/text-align-last. The choice is about how much old the browser is that you intend to support

span, a { display: inline-block; /* optionnal*/ } /* newest browser */ h3.flex { display: flex; justify-content: space-between; } /* check it on canisue.com */ h3.tAl { text-align: justify; text-align-last: justify; } /* oldest browsers such as IE8 */ h3.tA { text-align: justify; } h3.tA:after { content: ''; display: inline-block; width: 100%; } /* optionnal to not allow wrapping h3[class=^ta] { white-space:nowrap; } */

<h3> <span>My first sentence</span> <a href="#">My second sentence </a> </h3> <h3> <span>My first sentence</span> <a href="#">My second sentence </a> </h3> <h3> <span>My first sentence</span> <a href="#">My second sentence </a> </h3>

It worked by adding margin-left:80px;. So the final code is -

<h3> <span>My first sentence</span> <a href="#">My second sentence </a> </h3>

You can create different columns and then left align the text inside them.

.row{ text-align: left; width: 100%; display: block; } .half-row{ display: inline-block; width: 48%; padding: 1%; float: left; } .clear{ clear: both; }

<div> <div> My First Sentence </div> <div> My Second Sentence </div> <div></div> <!-- Needed for float handling --> </div>

You can just wrap it in a div to keep it in line like this.

 <div> <h3> <span>My first sentence</span> <a href="#">My second sentence </a> </h3> </div>