I am trying to get certain elements to display in a single line. Here is the HTML code I have:
h2 {
color: Red;
font-size: 30px;
font-weight: bold;
display: inline-block;
}
img {
display: inline-block;
}
h2.class1 {
color: green;
font-size: 20px;
display: inline-block;
}
h2.class2 {
color: yellow;
font-size: 14px;
display: inline-block;
}
.bg {
background-color: black;
}<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e859b859b86c9cedfca98">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
</html>
<!-- Code -->
<div class="bg">
<div class="container-sm center" style="margin-top: 25px;">
<div class="d-grid gap-2 col-6 mx-auto">
<img src="https://via.placeholder.com/50" width="50px" height="50px" style="border-radius:25px;">
<h2 style="font-size: 25px;">Some Heading Text</h2>
<h2 class="class1">{}></h2>
<h2 class="class2"> Some Tagline Like Text</h2>
<hr>
</div>
</div>
</div>This is the output I got: https://i.sstatic.net/QWgFb.png.
And this is how I would like it to look (after removing bootstrap): https://i.sstatic.net/UmOeK.png
Edit: Methods I have tried:-
- d-inline-block
- inline-block
- float property
- adjusting margins
- Using some Bootstrap classes (although I forgot which ones)
- Code snippets sourced from stackoverflow