Display icon next to label with HTML and CSS-CodePudding

I want to add an icon next to the labels in my interface below :

The problem is when I add the icon right to my labels, my interface changes and become like this :

Is there anyway to add icons and conserve the same actual interface? I would appraciate some help, here is my code :

<tr>
     <td className="name">Critère d'agrégation</td>
        <td className="value column-2">
             {aggregationDomain.map(codedValue => 
                <div className='blockTooltip'>
                    <label className = {!config?.aggregationEnabled.includes(codedValue.code) ? 'text-gray' : ''}
                                        >
                      <input type="radio" name="AggregationSelection" value={codedValue.code} checked={props.reportConfig.aggregation === codedValue.code} onChange={updateAggregation} disabled={!config?.aggregationEnabled.includes(codedValue.code)} />
                                        {codedValue.name}
                     </label>
                     <div className='svgTooltip'>
                          <svg className='svgTooltipIcon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width='13' height='13'><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216 192V224h24 48 24v24 88h8 24v48H296 216 192V336h24zm72-144H224V128h64v64z"/></svg>
                      </div> 
                                        
                 </div> 
              )}
       </td>
</tr>

CodePudding user response：

Adding this class in your css will fix it ig

.blockTooltip {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

CodePudding user response：

What's the display style of blockTooltip? If you set it to flex with a row direction should just align it the way you want.

Also any specific reason you are using a table for that specific layout?