0

I have two div elements whose display property is set to inline-block inside a div and width: 49.5%. It is rendering side by side. That's fine but in the case of different content heights, the one which has content with less space leaves space on the upside. What I want is that it doesn't leave space and fills that space and might increase padding-bottom. How to accomplish the

*{
        padding: 0;
        margin: 0;
    }

    .box {
       display: inline-block;
       width: 49.5%;
       background-color: yellow;
     }
    <div> 
        <div class="box"> Dummy txt </div>
        <div class="box"> Dumy txt 2               klmdflggmdfvlvlldfkvdlv.d v.dvdf.vdf b,df.b 
            ,dfb,dfbdf,bdfbdfb.dfbdfbdf,bmdf bdf,bdfb,dfbdf,mbd,m vd,vd vd,vdmv dvmdv ,dv ddf,dm 
            vd,vmd vd,vdvdv,dmv df,vmdfvd,vdvm dv,dv d,v</div>
        </div>
    </div>`

same? Following is the link to the code I created: https://codepen.io/shreyakjain14/pen/oNwRyzX

mr.Hritik
  • 577
  • 3
  • 19
shreyak jain
  • 13
  • 4

2 Answers2

1

You can use flex instead of inline-blocks. And first thing you need to do is target the parent element and assign it display: flex property. Rest all falls in order with the browser defaults.

* {
  padding: 0;
  margin: 0;
}

.parent {
  display: flex;
}

.box {
  /*  display: inline-block;*/
  width: 50%;
  background-color: yellow;
}
<div class="parent">
  <div class="box"> Dummy txt </div>
  <div class="box"> Dumy txt 2 klmdflggmdfvlvlldfkvdlv.d v.dvdf.vdf b,df.b ,dfb,dfbdf,bdfbdfb.dfbdfbdf,bmdf bdf,bdfb,dfbdf,mbd,m vd,vd vd,vdmv dvmdv ,dv ddf,dm vd,vmd vd,vdvdv,dmv df,vmdfvd,vdvm dv,dv d,v</div>
  <div>
Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
1

I think this is what you want to achieve.

*{
  padding: 0;
  margin: 0;
}
.d-flex{
    display: flex;
}
.box {
  display:inline-block;
  width: 50%;
  background-color: yellow;
}
.box1{
display:flex;
justify-content:center;
align-items:center;
<div class="d-flex"> 
  <div class="box box1"> Dummy txt </div>
  <div class="box"> Dumy txt 2               klmdflggmdfvlvlldfkvdlv.d v.dvdf.vdf b,df.b ,dfb,dfbdf,bdfbdfb.dfbdfbdf,bmdf bdf,bdfb,dfbdf,mbd,m vd,vd vd,vdmv dvmdv ,dv ddf,dm vd,vmd vd,vdvdv,dmv df,vmdfvd,vdvm dv,dv d,v</div>
 <div>
mr.Hritik
  • 577
  • 3
  • 19