HTML have text be right to a figure with image slider - html

Question

So currently I have an image slider at the left side, but the figure in that slide is set to width: 500%, I want to have text to the right of this figure, but when I try to put text there, it drops down below the image. I need text to the right of the figure image slider and the image on the left side.
#imgslide {
width: 550px;
height: 300px;
position: relative;
overflow: hidden;
}
#imgslide figure img {
opacity: .7;
filter: alpha(opacity=70);
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
width: 20%;
float: left;
border-radius: 10px;
}
#imgslide figure img:hover {
opacity: 1;
filter: alpha(opacity=100);
position: relative;
width: 23%;
display: block;
z-index: 999;
}
#imgslide figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s slidy infinite;
}
/* Keyframes */
#keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: 0%;
}
}
<div id="imgslide">
<figure>
<img src="https://placeholdit.imgix.net/~text?txtsize=52&txt=550%C3%97300&w=550&h=300" alt="">
<img src="https://placeholdit.imgix.net/~text?txtsize=52&txt=550%C3%97300&w=550&h=300" alt="">
<img src="https://placeholdit.imgix.net/~text?txtsize=52&txt=550%C3%97300&w=550&h=300" alt="">
</figure>
</div>

Answer 1

Add the property to .image-slider.
float: left;
Then create a new div, for example:
<div id="text-container">
<p>
Text example
</p>
</div>
And put the property to .text-container
float:right;