How can I make two divs appear next to eachother and not under eachother?

Question

Im still learning html/css therefore I apologize if the code is wrong. I've been doing a replica of a site. There are 4 articles on the down side of the site.

I've created two but the second one always appears under the first one, even though I've gave the div which wraps it "display: inline-block;". I haven't got to learn flexbox yet, any idea how can I fix this?

.subarticle {
    background: white;
    width: 220px;
    height: 350px;
    position: absolute;
    top: 135%;
    left: 20%;
    border: 1px solid black;
    
    
}

.goodidea {
    width: 100%;
    height: 40%;
}

.SOČ {
    font-family: "Open Sans",sans-serif;
}

.informacie {
    margin-top: -15px;    
    margin-left: 20px;
    font-family: "Open Sans",sans-serif;
    
}

.far {
    margin-right: 7px;
}

h3 {
    font-size: 15px;
    color: red;
    text-align: center;
    margin-right: 10px;
    
}

.read {
    color: orange;
    margin-top: -8px;
    margin-left: -10px;
    font-weight: 700;
    font-size: 12px;
    width: 70px;
    
}

.read:hover {
    background: rgb(241, 221, 184);
    transition: 0.3s ease;
    cursor: pointer;
}

.wrapper {
    display: inline-block;
    vertical-align: middle;
}

<article>
    <div class="subarticle">
      <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

         </div>

    </div>
        
        <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

        </div>
        </div>    

</div> 


</article>

Thanks in advance

you can read about [CSS flexbox](https://www.w3schools.com/css/css3_flexbox.asp) so u can achieve ur aims. — Burham B. Soliman, Jan 09 '21 at 13:07
and in ur case, use `display:flex;` into the parent `.subarticle {` — Burham B. Soliman, Jan 09 '21 at 13:12

Imran Rafiq Rather · Accepted Answer · 2021-01-09T13:15:15.557

Use display:flex; on the parent element and they will be aligned in one row. You will need no more CSS.

CSS:

.subarticle{
  display:flex;
}

Codepen Link: https://codepen.io/emmeiWhite/pen/YzGjOgP

FULL CODE SNIPPET:

.subarticle{
  display:flex;
}

<article>
    <div class="subarticle">
        <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

         </div>

    </div>
        
        <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

        </div>
        </div>    
     </div> 
</article>

How can I make two divs appear next to eachother and not under eachother?

1 Answers1