having trouble styling my contact us slider

Question

I have been trying to style my "contact us" slider window but for my lack of knowledge (started website designing only a month back for my own project) I am kinda stuck. The functionality is working great, but there are a few issues:

1. "contact us" text and a image that I am trying to get in a line is not working.
2. in collapse mode, div containing text "contact us" is getting reduced width wise.

Please excuse my not-so-technical language, since I am new to the concept.. Please refer my website koncreteplanet.com.. also, I have created a jsfiddle to give a glimpse of the code I am using ( https://jsfiddle.net/jjff2o2x/ ). Thanks in advance!!

Javascript code:

jQuery("#ContactUs_header").click(function () {
   jQuery('#slideContactUsbox').slideToggle('slow');
});

HTML / PHP code:

<div class="row">
    <div class="col-md-8">

    </div>

    <div class="col-md-4" id="contactus-panel">
        <div class="contactus-panel">
            <div id="ContactUs_header" class="contactus_footer" >
                <a  href="#"><p>Contact Us</p></a>

                <img align="right" width=auto height="40px" src= "<?php echo bloginfo('template_directory') . "/image/handshake.png" ;  ?>">

            </div>

            <div id="slideContactUsbox" class="contactus-extended">
                <div class="container" style="width:300px;align:left;" id="MailUs-Panel">
                    <form name="Form-MailUs" id="Form-MailUs" method="post" action=<?php echo (get_template_directory_uri() . "/contactus/html_form_send.php"); ?> >
                        <div class="">
                            <input  type="text" class="form-control mailflds" name="first_name" id="first_name" maxlength="50" size="30" placeholder="Name">
                        </div>
                        <br>
                        <div>
                            <input  type="text" class="form-control mailflds" name="email" id="email" maxlength="80" size="30" placeholder="E-Mail">
                        </div>
                        <br>
                        <div>
                            <input  type="text" class="form-control mailflds" name="telephone" id="telephone" maxlength="30" size="30" placeholder="Mobile / Landline Number">
                        </div>
                        <br>
                        <div>
                            <textarea  name="comments" id="comments" class="form-control mailflds" maxlength="1000" cols="25" rows="6" placeholder="Enter your comments"></textarea>
                        </div>
                        <br>
                        <div>
                            <Button class="btn btn-primary btn-block btn-custom" id="Submit_MailUs" name="Submit_MailUs">Submit</Button>
                        </div>
                        <div id="ack-mailus-err" style="color:red;font-family:garamond;font-size:18px;text-align:center;">
                        </div>

                    </form>
                </div>

                <div id="ack-mailus" style="color:green;font-family:garamond;font-size:18px;text-align:center;">
                </div>
            </div>

        </div>   <!--    end of contactus panel    -->  
    </div>
</div>

CSS code

.contactus-panel{
    position:fixed;
    bottom:0;
    z-index:9999;

}

.contactus_footer{
    position:relative;
    /*z-index: 10;  */
    /*float:right; */
    text-align: left;
    line-height: 1.5;
    cursor: pointer;
    padding: 5px 2px 4px 15px;
    font-family:'Raleway', garamond, sans-serif;
    font-size:20px;
    background-color: #084000;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    position: relative;
    width: 100%;
    vertical-align:center;
    float:left;
}

.contactus_footer a {
    color: #fff;
}
.contactus-extended{
    background-color:#fff;  
    padding-top:20px;
    padding-bottom:20px;
}

Answer 1

slideToggle() is jQuery method. Please using jQuery.

https://jsfiddle.net/pgqnjdvp/

Answer 2

我能够解决问题的两个部分..不能相信它就是那么简单..对于第2部分：我只是将宽度专门添加到容器中并且它不复存在......也解决了问题的第1部分。除了div类之外，还添加了float和vertical-align：中间的text和img元素样式，并获得了所需的结果。