How to make this span which contains a svg be next to a div-CodePudding

codepen.io/f0rta/pen/qBXRXvV

First of all, I'm sorry for the HTML being a little bit of a mess, my project is developed in React, that's why.

So, I'd like to have the audio icon next to the first test div. However, I'm not able to do it, I don't know why, even if I set fa-stack-custom to display: inline-block.

I expected setting my span to inline-block to make it stay next to the first test div, but it doesn't. (I think that's because of the SVGs)

How can I make it stay next to the first test div?

First of all, I'm sorry for the HTML being a little bit of a mess, my project is developed in React, that's why.

So, I'd like to have the audio icon next to the first test div. However, I'm not able to do it, I don't know why, even if I set fa-stack-custom to display: inline-block.

I expected setting my span to inline-block to make it stay next to the first test div, but it doesn't. (I think that's because of the SVGs)

How can I make it stay next to the first test div?

CodePudding user response：

Link to the changed code since stackoverflow doesn't allow characters greater than 5000.

There are several changes which I made and some of them are these:

.fa-w-16{
margin-left:50px; 
         }
.svg-inline--fa{
 vertical-align: -1em;
  display: inline;
         }
  .fa-stack-2x{
   position: relative;
          }
    .fa-w-18.fa-stack-1x {
    margin-left: -1.8em;
    margin-bottom: 0.5em;
          }
       .question {
display: inline-block;
border: 1px solid black;
border-radius: 1.5rem;
width: 75%;
text-align: left;
margin: 0.1rem 0;
height: 2.5rem;
margin-right: 5em;
        }
  .svg-inline--fa.fa-circle.circle-audio {
top: 15;
        }
          .fa-w-18.fa-stack-1x {
               top: 15;
                           }

These changes might not be the same exactly. The circle and the SVG are lined in front of the first test box(I think that is what you wanted.) As long as it stays there no matter what the viewport size the circle will contain the SVG but things get tricky when you try to move the circle along with the SVG. Apparently, you have to move them one by one. I was only able to make sense of it this much.

CodePudding user response：

Make the width for both of the elements' parent 'max-width', and then set display for the svg and text box to inline.