How to create a flexbox layout? - html

Question

i want to create a flexbox layout title, detail, and other content inside one div and a div with content close next to this div and should be placed in the center of the main box (named container).
What i have tried to do?
I created a div named container and placed title and other details inside it. In doing so, close div is also inside the div named container. It should be outside the container div and in middle of it.
I want to create a layout like in picture below,
Could someone help me solving this? link to code
https://codepen.io/anon/pen/BbaKwy
.box_wrapper {
width: calc(100% - 450px);
border: 1px solid green;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-between;
border: 1px solid blue;
padding: 10px;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
<div>close</div></div></div>
Thanks.

Answer 1

You can achieve the desired result by moving the close div and adding a couple more styles to box_wrapper
.box_wrapper {
display: flex;
flex-direction: row;
align-items: center;
border: none;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-between;
width: calc(100% - 450px);
border: 1px solid blue;
padding: 10px;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
</div>
</div>
<div>close</div>
adding the flex-direction:row to .box_wrapper is what aligns it to the right, and setting align-items:center is what positions it in the middle vertically.
EDIT:
If you want to achieve this while keeping the close div within the box_wrapper class, you can do so as follows:
.box_wrapper {
display: flex;
flex-direction: row;
border: none;
margin: 0 auto;
width: calc(100% - 450px);
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
padding: 10px;
}
.content {
border: 1px solid blue;
flex-grow: 1;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
</div>
<div>close</div>
</div>