How to place the Icon at the end of an H4

Question

I’m trying to make a button in React, but unfortunately I can’t put Icon behind the phrase

import React from 'react';
export function BotaoMenu(){
  return(
  <>
  <div className="row-flex-auto ">
    <div className="p-0 mt-0 mb-3">
   
  <a type="button" className="bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-full px-12 " href="/">
  <div className="">
  <IconPardao/>
  </div>
  <h4 className="ml-4">  Menu Teste</h4>
  
  </a>
  </div>
    
    </div>
  </>
  );
}

export function IconPardao(){
return(
  <>
  <div >  
  <img className="h-4 w-4" src={teste} />

  </div>

  </>
);

}
export default BotaoPadrao;

Answer 1

You can solve this easily with CSS using flex.

.container {
  width: 100%;
  display: flex; /* Define que o display dentro do container será flex */
  flex-direction: row; /* Define que os elementos ficarão organizados em linhas */
  align-items: baseline; /* Centraliza o elementos numa linha de base */
  background: lightgray;
}

.container span {
  background: lightyellow;
}

.container h4 {
  background: aqua;
  margin-left: 10px;
}

<div class="container">
  <span>Ícone</span>
  <h4>Isso é um teste</h4>
</div>