Can't seem to get form to appear inside a div? - html

Question

I'm trying to create a form that sticks at the bottom of the div that says "General" and "programming."
Here's a picture:
I've tried many things, and can't seem to get the form to appear... When I do get something to appear, I can't make it stick to the bottom either. Can anyone help?
I'm using bootstrap
Heres my HTML:
<div class="chatroom">
<div id="contain">
<div id="channels">
<div class="list-group">
General
Programming
</div>
<div id="bar"></div>
<form id="create-channel">
<div class="form-group">
<input type="text" id="c" class="form-control" autocomplete="off"></div>
</form>
</div>
<div id="chat">
<ul id="messages">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
<div class="input">
<form>
<div class="form-group">
<input type="text" id="m" class="form-control" autocomplete="off"></div>
</form>
</div>
</div>
</div>
</div>
and CSS:
body {
background-color: azure;
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size:cover;
}
.chatroom {
width: 90vw;
height: 80vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
border: 2px solid white;
border-radius: 30px;
background-color: white;
opacity:.8;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.input {
height: 40px;
width: 98%;
margin-left:1%;
margin-top: auto;
}
#chat .form-control{
border-bottom-right-radius: 30px;
border-top-right-radius: 30px;
}
#chat{
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
float: right;
height:100%;
width: 75%;
display: flex;
flex-direction: column;
}
#channels{
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
background-color: white;
width:25%;
float: left;
height:100%;
overflow-y: hidden;
}
#bar{
background-color:black;
height:100%;
float: right;
width: 3px;
}
#contain{
height:100%;
}
.list-group{
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size:20px;
width:calc(100% - 3px);
background-color:#bcbcbc;
float:left;
display:inline-block;
}

Answer 1

It works fine when I rearrange the bar div below your form. Check here: https://jsfiddle.net/vj2fyuLm/
<form id="create-channel">
<div class="form-group">
<input type="text" id="c" class="form-control" placeholder="one" autocomplete="off"></div>
</form>
<div id="bar"></div>
Update
You can have your entire form inside the list group like this: https://jsfiddle.net/vj2fyuLm/3/
<div class="list-group">
General
Programming
<form id="create-channel">
<div class="form-group">
<input type="text" id="c" class="form-control" placeholder="one" autocomplete="off"></div>
</form>
</div>

Answer 2

Can you remove the div with id #bar? It seems that by floating that to the right, you get some layout funk.
By removing that, the form field shows up then you can style it as you desire:
http://jsfiddle.net/20nhLz3x/4/