How to display image and text in same line in mobile device using css?

Question

I am able to display the image and text in the same line in desktop but In a mobile device, it is not displayed in the same line.It is displaying image and below text. I have to display both in the same line. Would you help me in this?

Below image:-I am getting output like this in mobile device.

Output: I have to display both i the same line.like displaying in desktop

.amazon-section{
    text-align:center;
    background-color: #fff;
    display: table;
    margin: 0px auto 0px auto;
    padding: 0px 38px 5px;
    border-radius: 04px;
    webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    position: relative;
    top: 20px;
    font-family:"Arcon-Regular";
    box-sizing: border-box;
}
.amazon-section img{
    width:100px;
    padding:10px;
    position: relative;
    right: 20px;
}
.amazon-content{
    display:inline-block;
}
.amazon-content h2{
    font-size:18px;
    color:#53585F !important;
    font-weight: 600;
    position: relative;
    top: 15px;
}

 <div class="amazon-section">
     <div class="amazon">
         <img src="images/amazon.png">
         <div class="amazon-content">
             <h2 class="amazon-text">Lorem ipsum dolor tetur<br /> adipiscing elit.</h2>
         </div>
    </div>
</div>

Answer 1

you can do this with flexbox and leave your html a little cleaner and leaner.

Basically, you can easily control both vertical and horizontal centering with justify-content (horizontal or main axis) and align-items (vertical or cross axis), which you can set on the container/parent directly.

.amazon-section
{
 text-align:center;
 background-color: #fff;
 display: table;
 margin: 0px auto 0px auto;
 padding: 0px 38px 5px;
 border-radius: 04px;
 webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
 -moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
 box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
 position: relative;
 top: 20px;
 font-family:"Arcon-Regular";
 box-sizing: border-box;
}
.amazon {  /*set children to be centered vertically and horizontally*/
 display: flex;
 justify-content:center;
 align-items:center;
}
.amazon-section img /*children need no positional css*/
{
 width:100px;
 padding:10px;
}
.amazon-content h2
{
 font-size:18px;
 color:#53585F !important;
 font-weight: 600;
}

codepen example