How to make the Flashing Button appear after the text - html

Question

I have a simple HTML problem. I have a text and a css button.
My problem is I want to make the css button appear right after my text.
here is my HTML:-
<style>
.led-box {
height: 30px;
width: 25%;
margin: 10px 0;
float: left;
}
.led-box p {
font-size: 12px;
text-align: center;
margin: 1em;
}
.led-red {
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
-webkit-animation: blinkRed 0.5s infinite;
-moz-animation: blinkRed 0.5s infinite;
-ms-animation: blinkRed 0.5s infinite;
-o-animation: blinkRed 0.5s infinite;
animation: blinkRed 0.5s infinite;
}
#-webkit-keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
#-moz-keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
#-ms-keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
#-o-keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
#keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
</style>
<div class="row"></div>
<h1 class="center" style="color:Black; font-size: 3.5vw;">Welcome to <span id="h5">Comet 1.1</span></h1>
<div class="led-box">
<div class="led-red"></div>
<p>Request Pending</p>
</div>
The image below is my output:-
I have now edited by code please have a look and let me know what can be the possible solution.

Answer 1

Added div with .textContainer class which wraps text & button. Also removed float: left css property.
🔗 Codepen Example
Code snippet:
.led-box {
height: 30px;
width: 25%;
margin: 10px 0;
display: inline-block;
}
.led-box p {
font-size: 12px;
text-align: center;
margin: 1em;
}
.led-red {
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
-webkit-animation: blinkRed 0.5s infinite;
-moz-animation: blinkRed 0.5s infinite;
-ms-animation: blinkRed 0.5s infinite;
-o-animation: blinkRed 0.5s infinite;
animation: blinkRed 0.5s infinite;
}
#-webkit-keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
#-moz-keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
#-ms-keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
#-o-keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
#keyframes blinkRed {
from { background-color: #F00; }
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
to { background-color: #F00; }
}
.textContainer {
text-align: center;
}
.center {
display: inline-block;
}
<div class="row"></div>
<div class="textContainer">
<h1 class="center" style="color:Black; font-size: 3.5vw;">Welcome to <span id="h5">Comet 1.1</span></h1>
<div class="led-box">
<div class="led-red"></div>
<p>Request Pending</p>
</div>
</div>

Answer 2

<div class="container">
<h1 class="center" style="color:Black; font-size: 3.5vw;">Welcome to <span id="h5">Comet 1.1</span></h1>
<div class="led-box">
<div class="led-red"></div>
<p>Request Pending</p>
</div>
</div>
.container { display: flex; }

Answer 3

Try this
.container{
display: flex;
}
<div class="container">
<h1 class="center" style="color:Black; font-size: 3.5vw;">Welcome to <span id="h5">Comet 1.1</span></h1>
<div class="led-box">
<div class="led-red"></div>
<p>Request Pending</p>
</div>
</div>