How to align a window on right side with flexible height? - html

Question

Hey!
As you see in the picture I want to move the existing chatwindow to the right side where the red box is.
And I also need the box to change the height of itself when the window is made smaller.
The grid is from semantic.ui.
EDIT: On some request the whole css and parent html container is given. Hope this helps to solve the problem.
Thanks!
HTML:
<div class="two column doubling ui grid">
<div class="column">
<div class="ui segment">
1
</div>
</div>
<div class="computer only column">
<div class="chat_window">
<div class="top_menu">
<div class="buttons">
<div class="button maximize">
<h4 id="Online"></h4>
</div>
</div>
<div class="title">Chat</div>
</div>
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper"><input class="message_input" placeholder="Type your message!" /></div>
<div class="send_message">
<div class="text">Send</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="avatar"></div>
<div class="text_wrapper">
<div class="msgname"><a id="steamlink" target="_blank"><p id="msgname"></p></a></div>
<div class="text"></div>
</div>
</li>
</div>
</div>
</div>
CSS:
.chat_window {
width: 100%;
max-width: 450px;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
background-color: #f8f8f8;
overflow: hidden;
}
.top_menu {
background-color: #fff;
width: 100%;
padding: 20px 0 15px;
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.top_menu .buttons {
margin: 3px 0 0 20px;
position: absolute;
}
.top_menu .buttons .button {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
position: relative;
}
.top_menu .buttons .button.close {
background-color: #f5886e;
}
.top_menu .buttons .button.minimize {
background-color: #fdbf68;
}
.top_menu .buttons .button.maximize {
background-color: #a3d063;
}
.top_menu .title {
text-align: center;
color: #bcbdc0;
font-size: 20px;
}
#Online{
margin: 0 0 0 20px;
color: #bcbdc0;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 600px;
overflow-y: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 10px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .avatar {
background-size: 100%;
float: left;
}
.messages .message.left .text_wrapper {
background-color: #DFDFDF;
margin-left: 20px;
}
.messages .message .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
}
.messages .message .msgname {
font-weight: bold;
}
.messages .message .text_wrapper {
display: inline-block;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 6px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper .text {
font-size: 14px;
font-weight: 250;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 10px 10px;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border-radius: 5px;
border: 1px solid #bcbdc0;
width: calc(100% - 100px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 90px;
height: 50px;
display: inline-block;
border-radius: 5px;
background-color: #563D7C;
color: #fff;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
Picture:
Click here