Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1521

Arrange row column parallel using CSS flex

$
0
0

What I am trying is, "Your Privacy", Description and buttons should be aligned in same line.

HTML:

<div class="cookie-notice"><div class="cn-body"><h2 id="title">Your Privacy</h2><p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p><div class="cn-ok"><a href="#" class="cm-link cn-learn-more">Decline</a><div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div></div></div></div>

CSS:

.cn-body {    display: flex;    flex-direction: column;    font-family: myriad-pro, sans-serif;    gap: 0;    padding: 0;    width: 100%;    padding: 40px 113px;    boder: 1px solid red;    margin: 10px;}.cm-btn-danger {    display: none;}.cn-ok {    align-items: center;    display: flex;    flex-direction: row-reverse;    gap: 10px;    justify-content: end;    margin-top: 20px}

Here is the codeply: code

Expected output: output

NOTE: Can't change the HTML code as it is coming from the third party package


Viewing all articles
Browse latest Browse all 1521

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>