JSFiddle - React, Tailwind, and code Playground

HTML

<div id="confirm">
            
            <div id="test">
                <img src="images/help.png" alt="Help Icon">
            </div>
            
            <div id="spacer"></div>
            
            <div id="message">

                Are you sure you want to  

                <div id="dialog-button">
                    <button>Ok</button>
                    <button>Cancel</button>
                </div>             
            </div>

             
        </div>

CSS

#confirm {

    background-color: #ddd;
    display:block;
    width:400px;
    min-height:120px;
    position:absolute;
    border:1px solid #ccc;
    border-radius: 15px;
    -moz-border-radius: 15px;              /*FireFox*/
    -webkit-border-radius: 15px;           /*Opera, safari*/
    behavior: url(css/border-radius.htc);  /*IE*/
}

#test{
    position: absolute;
    border: 1px solid lime;
    height: 100%;
    width: 104px;
}

#confirm img {
    vertical-align: middle;
    border:1px solid red;
    margin:20px 20px 0 20px;
    float:left;
    position: relative;
    top: 50%;
    width:64px;
}
 
#confirm #test img {
    border:1px solid blue;
    position: relative;
    top: 50%;
    margin-top: -32px;
    width: 64px;
    height: 64px;
}

#confirm #spacer {
    margin:20px 0 0 0;
    float: left;
    width: 104px;
}

#message {
    width: 280px;
    border:1px solid #ccc;
    float: left;
    white-space: normal;
    word-wrap: break-word;
    margin:20px 0 0 0;
    overflow: hidden;
}

#message-withoutIcon {
    width: 360px;
    border:1px solid #ccc;
    float: left;
    white-space: normal;
    word-wrap: break-word;
    margin:20px 20px 0 20px;
    overflow: hidden;
}

#dialog-button {

     border:1px solid #ccc;
     position: relative;
    
    /**
     *

    
    width: 139px;
    margin:20px 180px 0 0;    
    float:right;
    */
}

button {
    
    width: 64px;
       
}