After trying to find a solution on this site without success, I realized that my situation is quite unique. I need to avoid changing the HTML code, minimize the use of classes, and refrain from using IDs.
The current HTML structure I am working with includes:
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background: linear-gradient(to top right, #dddddd, #f7f8ff, #ffffff);
background-attachment: fixed;
font-family: "faricy-new-web", sans-serif;
text-align: center;
}
div {
background-color: #A9B6C7;
margin: 5% 10% 5% 35%;
padding: 2%;
display: block;
}
/*TITLE BOX STYLE*/
.title div {
display: flex;
}
.title .c4title {
font-size: 200%;
font-weight: bold;
display: block;
}
.title p .c6 {
display: flex;
justify-content: space-around;
padding: 5%;
margin: 5%;
}<div class="title">
<p class="c4title">
<a name="h.c2v2rn37qt4d"></a><span>Title</span></p>
<div>
<p class="c1"><span></span></p>
<p class="c6"><span>Info: <pre>Result</pre></span></p>
<p class="c6"><span>Date: <pre>Wed Jun 21 2017</pre></span></p>
<p class="c1"><span></span></p>
</div>
</div>Despite my efforts, I can't seem to achieve the desired alignment in the layout.
Therefore, my query remains – Is there a method to address these challenges while using flexboxes or do I have no choice but to modify the HTML?
Edit: Upon removing "display: flex" from the .title div, floats work perfectly. However, I'm still curious if it's possible to accomplish the same outcome using flexboxes.