Answer
If you're facing a problem, there are several ways to solve it. The most common way back in 2016 was using the css float property. However, more modern approaches include using flexbox or grid.
Using flexbox
You can utilize display: flex for this purpose.
Flexbox is supported by newer browsers. Keep in mind that if you have users on IE (9 and below), this method might not be suitable.
Here's an example of html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
And the corresponding css:
.wrapper { display: flex; }
.block { width: 50%; }
View the live demo.
Utilizing grid
You may also opt for display: grid for achieving the desired layout.
Grid layout is mainly supported by the most modern browsers (as of Sep 2017). If your audience uses evergreen browsers, then go ahead with this option; otherwise, stick with flex.
Example html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
Sample css:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
Check out the live demo here.
Using float
The classic method involving the css float property has been used since ancient times and remains compatible with virtually all browsers. Just keep in mind the clearfix issue.
Example html:
<div class="wrapper">
<div class="block-left"></div>
<div class="block-right"></div>
</div>
Corresponding css:
.block-left { float: left; }
.block-right { float: right; }
If floated elements affect the parent's height, you can use the clearfix hack to address this issue.
To apply it:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
Then on your parent element:
<div class="wrapper cf">
This will ensure that the parent accurately encompasses the floated elements' height.
Learn more about what the clearfix hack is.
Take a look at the demo here.
Other Approaches
Using inline-block
Another option would be employing the inline-block property to position elements alongside each other.
Note that dealing with white space in html between blocks can be tricky when using inline-block. You have the choice to remove the space, add a negative margin, or set the parent's font-size to 0 to counteract this issue.
Sample html:
<div class="wrapper">
<div class="block"></div><div class="block"></div>
</div>
CSS code snippet:
.block { display: inline-block; }
/* Optional zero font for wrapper
Then reset blocks to normal font-size */
.wrapper { font-size: 0; }
.block { font-size: 16px; }
/* Optional negative margin if you can't
remove space manually in the html.
Note that the number is per use case. */
.block { margin-left: -.25em; }
Try out the live demo.
Applying position: absolute
An alternative strategy is to absolutely position elements within a relative container. However, this method may pose challenges for responsive designs and similar layouts.
Sample html:
<div class="wrapper">
<div class="block block-left"></div>
<div class="block block-right"></div>
</div>
Sample css:
.wrapper { position: relative; }
.block { position: absolute; }
.block-left { left: 0; }
.block-right { right: 0; }
Explore the live demo.
Understanding Why Your Solution Fails
Your attempt with the text-align css property affects inline elements and text, but it does not shift elements like float does.
text-align influences the children of the applied element.