CODEWITHSUNDEEP
htmlcss
user12280259
user12280259

Reputation:

How to make two different things be one beside the other?

I have these 8 things:

<p id="ERT">Exploration Rocket</p>
<button id="ERB" onclick=""><img id="ERBI" src="Rocket.svg"></button>
<h4 id="ERP">Price: </h4>
<button id="ERS" onclick="">Send Rockets</button>

<p id="EST">Exploration Satelite</p>
<button id="ESB" onclick="buySatelite()"><img id="ESBI" src="Satelite.svg"></button>
<h4 id="ESP">Price: </h4>
<button id="ESS" onclick="sendSatelites()">Send Satelites</button>

How would I make each thing be one beside each of it but each be at a different height?

Upvotes: 0

Views: 51

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

for infos and to remind there is not only (display) flex nor grid method/layout to draw columns ;). 

body {
  column-count: 2;  /* this is enough to draw your 2 columns */
  
  
  /* from here, just makup */
  column-rule: 1px solid;
  text-align: center;
}

p {
  margin: 0 0 1em;
}
<p id="ERT">Exploration Rocket</p>
<button id="ERB" onclick=""><img id="ERBI" src="Rocket.svg"></button>
<h4 id="ERP">Price: </h4>
<button id="ERS" onclick="">Send Rockets</button>

<p id="EST">Exploration Satelite</p>
<button id="ESB" onclick="buySatelite()"><img id="ESBI" src="Satelite.svg"></button>
<h4 id="ESP">Price: </h4>
<button id="ESS" onclick="sendSatelites()">Send Satelites</button>

Upvotes: 0

Chris
Chris

Reputation: 424

You can put the two categories in two different div's, and contain those two divs in a parent div. Like this:

<div class="parent">
    <div class="item">
        <p id="ERT">Exploration Rocket</p>
        <button id="ERB" onclick=""><img id="ERBI" src="Rocket.svg"></button>
        <h4 id="ERP">Price: </h4>
        <button id="ERS" onclick="">Send Rockets</button>
    </div>

    <div class="item">
        <p id="EST">Exploration Satelite</p>
        <button id="ESB" onclick="buySatelite()"><img id="ESBI" src="Satelite.svg"></button>
        <h4 id="ESP">Price: </h4>
        <button id="ESS" onclick="sendSatelites()">Send Satelites</button>
    </div>
</div>

<style>
    .parent {
        display: flex;
    }
</style>

Upvotes: 1

Related Questions