Prevent a flex button to take up full width

Regular html & css <style> .container { display: flex; flex-direction: column; } .item { display: flex; flex-direction: row; align-items: center; align-self: center; } </style> <body> <div class="container"> <button class="item"> <span>Click me!</span> <i>Icon</i> </button> </div> </body> Or with TailwindCSS <body> <div class="flex flex-col"> <button class="flex flex-row items-center self-center"> <span>Click me!</span> <i>Icon</i> </button> </div> </body> See also https://stackoverflow.com/a/67819933/4496102 image/svg+xml