How to make height of both elements equal? [duplicate]-CodePudding

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 case of different content height the one which has content with less space leaves space on upside. What I want is that it doesn't leave space and fills that space and might increase padding-bottom. How to accomplish same? Following is the link of the code I created:

* {
  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>

CodePudding user response：

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>

CodePudding user response：

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>