Html Question posted in
Some basic documentation can be found here.

Html – Arrange row column parallel using CSS flex

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

Tags:

2

Answers


  1. 0

    We can use justify-content: start to align the buttons!

    I made the middle element position: absolute and aligned the element based on the parent, I made the CSS as max responsive as possible, do validate it once before implementation!

    .cookie-notice {
  padding: 40px 113px;
  border: 1px solid red;
  margin: 10px;
}

.cn-body {
  display: flex;
  flex-direction: row;
  position: relative;
  font-family: myriad-pro, sans-serif;
  gap: 0;
  padding: 0;
  width: 100%;
}

.cm-btn-danger {
  display: none;
}

#title {
  flex: 80%;
  display: flex;
}

#id-cookie-notice {
  position: absolute;
  left: 0px;
  top: 32px;
  margin-right: 18%;
}

.cn-ok {
  flex: 20%: align-items: center;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  justify-content: start;
  margin-top: 20px
}
    <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>
    Login or Signup to reply.
  2. 0

    In this case I would wrap the title and description into another element in order to split the layout into what you want on the left and what you want on the right side.

    The justify-content: space-between would place your wrappers one on the left and one on the right.

    For the right section you will need flex-direction: column to achieve that output.

    .cn-body {
    display: flex;
    /*flex-direction: column;*/
    justify-content: space-between;
    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 {
    flex-direction:column;
    align-items: center;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px
}
    <div class="cookie-notice">
    <div class="cn-body">
        
        <div class="cn-content">
            <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>
        
        <div class="cn-ok">
            <a href="#" class="cm-link cn-learn-more">Manage Preferences</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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search