Как поднять вверх svg иконку?

Question

[Ольга]

Добрый день. Есть такой код:

<div class="step-info__item">
	<div class="info-contaner"><p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">Госпошлина</p> 
		<svg class="info-icon" style="margin-right: 5px;margin-left: 7px!important;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
			<defs>
				   <path id="nto3a" d="M1092.17 807.4a8.58 8.58 0 1 1-17.16 0 8.58 8.58 0 0 1 17.16 0zm-6.65 4.12a2.52 2.52 0 0 1-.82.19c-.29 0-.49-.05-.6-.14-.12-.1-.18-.27-.18-.53a5.66 5.66 0 0 1 .17-.99l.56-1.95a5.68 5.68 0 0 0 .14-1.04c0-.4-.15-.74-.43-1a1.8 1.8 0 0 0-1.23-.38c-.3 0-.6.05-.94.16-.33.1-.68.23-1.04.38l-.14.6.38-.13c.15-.04.3-.06.44-.06.3 0 .49.05.6.14.1.1.14.28.14.52 0 .14-.01.3-.04.46l-.13.54-.55 1.95a6.1 6.1 0 0 0-.14 1.03c0 .4.15.73.44 1 .3.25.72.38 1.25.38.35 0 .65-.04.92-.14.26-.09.61-.22 1.05-.4zm.14-8.17c0-.34-.13-.63-.38-.87a1.3 1.3 0 0 0-.93-.36c-.36 0-.67.12-.93.36s-.39.53-.39.87c0 .34.13.63.39.87.26.23.57.35.93.35.36 0 .67-.12.93-.35.25-.24.38-.53.38-.87z"></path>
			</defs>
			 <g>
				<g transform="translate(-1075 -798)">
				     <use fill="#dadada" xlink:href="#nto3a"></use>
				</g>
			</g>
		</svg>
		<div class="info-window">
Текст подсказки
		 </div>
                 </div>
<p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">-</p> 
<span class="costs-p__strong costs-p--gos" onchange="handleChange(this)">  4 000 ₽</span></div>

Иконка i должна быть справа от слова Госпошлина, но почему-то съезжает вниз. Как её засунуть в эту же строку?

Comments

[Даниил Маслов]

приложите css код и выложите на песочницу

Answer 1

[camelCaseVlad]

Привет, один из вариантов решения проблемы, это обернуть параграф и СВГ в div и добавить на него display: flex

<div class="step-info__item">
  <div class="info-contaner">
    <div class="state-duty" style="display: flex">
          <p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">Госпошлина</p> 
    <svg class="info-icon" style="margin-right: 5px;margin-left: 7px!important;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
      <defs>
           <path id="nto3a" d="M1092.17 807.4a8.58 8.58 0 1 1-17.16 0 8.58 8.58 0 0 1 17.16 0zm-6.65 4.12a2.52 2.52 0 0 1-.82.19c-.29 0-.49-.05-.6-.14-.12-.1-.18-.27-.18-.53a5.66 5.66 0 0 1 .17-.99l.56-1.95a5.68 5.68 0 0 0 .14-1.04c0-.4-.15-.74-.43-1a1.8 1.8 0 0 0-1.23-.38c-.3 0-.6.05-.94.16-.33.1-.68.23-1.04.38l-.14.6.38-.13c.15-.04.3-.06.44-.06.3 0 .49.05.6.14.1.1.14.28.14.52 0 .14-.01.3-.04.46l-.13.54-.55 1.95a6.1 6.1 0 0 0-.14 1.03c0 .4.15.73.44 1 .3.25.72.38 1.25.38.35 0 .65-.04.92-.14.26-.09.61-.22 1.05-.4zm.14-8.17c0-.34-.13-.63-.38-.87a1.3 1.3 0 0 0-.93-.36c-.36 0-.67.12-.93.36s-.39.53-.39.87c0 .34.13.63.39.87.26.23.57.35.93.35.36 0 .67-.12.93-.35.25-.24.38-.53.38-.87z"></path>
      </defs>
       <g>
        <g transform="translate(-1075 -798)">
             <use fill="#dadada" xlink:href="#nto3a"></use>
        </g>
      </g>
    </svg>
    </div>
    <div class="info-window">
Текст подсказки
     </div>
                 </div>
<p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">-</p> 
<span class="costs-p__strong costs-p--gos" onchange="handleChange(this)">  4 000 ₽</span></div>

https://jsbin.com/baguhinaqu/edit?html,output