problem when leaving items horizontally in a div

Question

i wanted to let this img, the name, the input, the change button horizontal, but I’m not getting..

html code:

<div id="wrappermenux">
        <div id="menupromo"><h3 class="novidades">Meu Carrinho</h3></div>
            <section>

            <article class="first float-left">
            <table>


                  <img class="imgcar" src="images/<?= $mostrar['skin_img']?>">
                <strong><p class="nomecar"><?= $produtos; ?></p></strong>
                <input type="text" name="produto" value="<?= $produtos?>" style="display:none" ></td>
                <form method="post">
                <td class="bgcolor-gray"><p class="text-center color-dark-full font-text-light">
                    <input type="text" value="<?= $mostrar['skin_quantidade']?>" name="1" id="estoque" style="display:none;">
                    <input type="text" value="<?= $mostrar['skin_preco'];?>" name="preco" id="estoque" style="display:none;">
                    <input type="number" name="id"  value="<?= $mostra['temporario_id']?>" style="display:none;">
                    <input type="number" name="quantidade"  value="<?= $mostra['temporario_quantidade']?>" class="qtdchange" id="qtd" onchange="acrescentar()">
                    <button class="color-white link-bgcolor-green-dark-b" name="alterar" value="Alterar"> Alterar</button>

                <td class="bgcolor-gray"><p class="text-center color-dark-full font-text-light">R$ <?=  number_format($mostra['temporario_preco'], 2,',','.');?></p></td>

css code:

*{margin:0;padding:0;}
a{
    text-decoration: none;
}
#wrappermenux{

        margin-right: auto; /* 1 */
    margin-left:  auto; /* 1 */

    max-width: 1280px; /* 2 */
    padding-top:  50px; /* 3 */
    padding-bottom: 10px;
}
img.imgcar{
    margin-top: 10px;
    height: 60px;width: 80px;
}
p.nomecar{
    color:#E70408;
    font-size: 22px;
}
p.nomecar:hover{
    color:#00E3FF;

}
input.qtdchange{
    padding-left: 15px;
    width: 45px;
    height: 35px;
}

Answer 1

You need an external div Enerica, around the three elements and the inline display attribute...

<div class= "row"   **style = " display: inline-flex"**>
    <img class="imgcar" src="images/<?= $mostrar['skin_img']?>">
    <strong><p class="nomecar"><?= $produtos; ?></p></strong>
    <input type="text" name="produto" value="<?= $produtos?>" style="display:none" ></td>
    <form method="post">
</div>

Answer 2

Good morning, my friend, see if this helps you.

#container {
    display: flex; /* establish flex container */
        flex-direction: row; /* make main axis horizontal (default value) */
        justify-content: center; /* center items horizontally, in this case */
        align-items: center; /* center items vertically, in this case */
    height: 300px; /* for demo purposes */
    border: 1px solid black; /* for demo purposes */
    background-color: #eee; /* for demo purposes */
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

#bluebox { background: aqua; }
#redbox { background: red; }

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>