BootStrap / CSS fix position of a div - html

Question

Hello, i'm kinda new at css/bootstrap, i'm learning actually.
In this case, i will probably need to add some css at "chat_funcs" div, but i don't know what to write to get what i want.
The problem:
What i want is:
My code so far:
HTML:
<div id="chat" class="col-md-3 col-xs-12">
<span class="titulo">Chat</span>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
</div>
<div id="chat_funcs" class="pull-right col-md-3 col-xs-12">
<div class="pull-left">
<input class="form-control" type="text">
<input class="btn btn-default" type="button" value="Enviar">
</div>
</div>
CSS:
#chat {
background-color: red ;
overflow: scroll;
overflow-x: hidden;
height: 80%;
position: absolute;
right: 0;
display: inline-block;
}

Answer 1

In order to achieve this you are going to use additional html div container. There're other ways too, but this one came to my mind first.
Here is html markup:
<div id="chat-container" class="col-md-3 col-xs-12">
<div class="row">
<div id="chat" class="col-md-12 col-xs-12">
<span class="titulo">Chat</span>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
</div>
</div>
<div class="row">
<div id="chat_funcs" class="col-md-12 col-xs-12">
<div class="pull-left">
<input id="message-text" class="form-control" type="text"><br/>
<input class="btn btn-default" type="button" value="Enviar">
</div>
</div>
</div>
</div>
and here is css:
#chat-container{
position: absolute;
right: 0;
width: 160px;
}
#chat {
background-color: red ;
overflow: scroll;
overflow-x: hidden;
height: 80%;
width: 100%;
display: inline-block;
}
#message-text{
width: 140px;
}
here is a fiddle
I hope this helps