CDHtmlDIalog -make div inside div inline

Question

Hi,
I am loading HTML page in CDHtmlDialog.

In CDHtmlDialog, I tried to center align image vertically and horizontally inside div as suggested https://learn.microsoft.com/en-us/answers/questions/531131/jfjjfkjfkg.html

Below my html and css code .This code shows below output in CDHtmlDialog.

In IE11 browser and MIcrosoft Edge, it shows below output. red border is not coming properly

My HTML code

----------------

<div class="parent">  
<div class="child">  
<span style="position:relative;top: 20px;">  
<img class="im" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />  
<img class="im" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />  
</span>  
 </div>  
 </div>  

My CSS Code

---------------

.parent {
display: inline;
vertical-align: middle;
height: 100px;
width: 300px;
text-align: center;
position: relative;
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;

}

.child {  
    top: 20px;  
    left: 0px;  
    height: 60px;  
    width: 300px;  
    text-align: center;  
    position: absolute;  
    border-top: 1px solid yellow;  
    border-right: 1px solid yellow;  
    border-bottom: 1px solid yellow;  
    border-left: 1px solid yellow;  
}  

.im {  
height:20px;  
}  

How to make same code to work in both CDHtmlDialog and in browser. The problem in browser is the parent and child div is not coming inline, the child div is moving to next line. I need to make same code to work in both browser and CDHtmlDialog.

If I change display as display: inline-block; in parent class, in both browser and CDHtmlDialog, it is working fine but If I add one more div in the same level of parent div, in browser it is working fine whereas in CDHtmlDialog it is not working.

Browser output

-----------------

CDHtmlDialog output

------------------------

I want div with parent class and div with class Text to be inlined.

HTML
-------

 <div class="parent">  
  <div class="child">  
  <span style="position:relative;top: 20px;">  
  <img class="im" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />  
  <img class="im" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />  
  </span>  
   </div>  
   </div>  
   <div class="Text">Text2</div>  

CSS
-----

 .parent {  
white-space: nowrap;  
overflow: hidden;  
display: inline-block;  
vertical-align: middle;  
 height: 100px;  
 width: 300px;  
  text-align: center;  
  position: relative;  
  border-top: 1px solid red;  
  border-right: 1px solid red;  
  border-bottom: 1px solid red;  
  }  

.child {  
    top: 20px;  
    left: 0px;  
    height: 60px;  
    width: 300px;  
    text-align: center;  
    position: absolute;  
    border-top: 1px solid yellow;  
    border-right: 1px solid yellow;  
    border-bottom: 1px solid yellow;  
    border-left: 1px solid yellow;  
}  

.im{
height:20px;
}

.Text {
left:301px;
width: 200px;
display: inline;
text-align: center;
border-right: 1px solid green;
height: 100px;
line-height:98px;
border-top: 1px solid green;
border-bottom: 1px solid green;
vertical-align: middle;
position:absolute;
}

How to make same code work in both CDHtmlDialog and browser.