Make div display as horizontal

February 17, 2023

How can make this display as horizontal current is vertical, something that left to right not top to bottom.

I tried display:flex but only the extra-text class get display:flex no the outside div.

.main-text:hover + .extra-text{
  display:block;
}
.extra-text{
   background-color: #FFFFFF;
    margin-top: 10px;
    width: 70%;
    border: 2px solid #000000;
    padding: 12px;
    font-size: 10px;
    display: none;
}

<div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
 <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
          <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
          <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>

>Solution :

There are multiple ways of going about this but the easiest with your current example would be to wrap your existing code with a div with width = 100% and display: flex.

.main-text:hover + .extra-text{
  display:block;
}
.extra-text{
   background-color: #FFFFFF;
    margin-top: 10px;
    width: 70%;
    border: 2px solid #000000;
    padding: 12px;
    font-size: 10px;
    display: none;
}

<div style="width: 100%; display: flex;">
<div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
 <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
          <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
          <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
</div>