How can I position my div next to the some text? - html

Question

Using Bootstrap3, I'm trying to position my div beside some text.
CODE:
<h1>Text</h1>
<div style="position: relative; display: inline-block">
<div style="width: 40px; position: absolute">
<div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
</div>
</div>
<div style="width: 30px; position: absolute">
<div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
</div>
</div>
</div>
codepen: https://codepen.io/anon/pen/ddORed
I just want to use this div like a span icon.
So moreover, I wonder how to make my div's height be responsive to the height of text or text typhograpy .
How to do it?

Answer 1

Just put that DIV - but better as a SPAN - (which you already correctly defined as an inline-block) INTO the h1 tag (BTW: no h1 inside p!) and add vertical-align:top;, so it aligns with the upper border of the text line:
<h1>Text
<span style="position: relative; display: inline-block;vertical-align:top;">
<div style="width: 40px; position: absolute">
<div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
</div>
</div>
<div style="width: 30px; position: absolute">
<div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
</div>
</div>
</span>
</h1>
https://codepen.io/anon/pen/yvVogM

Answer 2

Not exactly sure what you want to do by you can do this by using linear-gradient as background and no need to use all this markup:
h1 {
display: inline-block;
padding-right: 50px;
background:
linear-gradient(to right, #f8ff15, #f8ff15) calc(100% - 10px) 0/ 30px calc(100% - 10px) no-repeat,
linear-gradient(to right, darkblue, darkblue) 100% 0/ 40px 100% no-repeat;
}
<h1>Text</h1>
<br>
<h1>another<br> text</h1>

Answer 3

You can just move your divs before you text and set the position to absolute.
https://codepen.io/anon/pen/MQboRj
<div style="position: absolute; display: inline-block">
<div style="width: 40px; position: absolute">
<div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
</div>
</div>
<div style="width: 30px; position: absolute">
<div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
</div>
</div>
</div><h1 style="padding-left:50px;">Here is what I want to position my blue and yellow square. And also I hope my square's height be equal to Text's height</h1></div>