I am looking to design a flexbox layout that includes a title, detail, and other content within one div. Additionally, I want another div with content placed closely next to the first div, all centered within the main box (referred to as container).
What have I tried so far? I created a div called container and placed the title and details inside it. However, in doing so, the close div is also contained within the container div. It should actually be outside of the container div and positioned in the center.
I aim to achieve a layout similar to the image shown below: https://i.sstatic.net/8grF6.png
Can anyone assist me in solving this issue? Here is the link to the 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>
Thank you.