Text and button side by side

user_16571831 0
Viewed 95

I am trying to trim my text and near the text, there should be a button....but both must be in a same line. This is what I have:

.wpcc-banner.wpcc-bottom {
    left: 0;
    right: 0;
    bottom: 0;
}

.wpcc-banner .wpcc-message {
    display: block;
    flex: 1 1 auto;
    margin-right: 1em;
    max-width: 100%;
}
span.wpcc-message {
    text-align: center;
}

.wpcc-color-custom-1621853993.wpcc-container {
    background-color: rgb(34, 34, 34);
    border-color: rgb(230, 179, 179);
    color: rgb(255, 255, 255);
}
.wpcc-container {
    border-style: solid;
    border-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5em;
    overflow: hidden;
    position: fixed;
    transition: opacity 1s ease;
    z-index: 9999;
}
.wpcc-btn {
    display: block;
    font-size: .9em;
    font-weight: 700;
    padding: .4em .8em;
    text-align: center;
    white-space: nowrap;
}
.wpcc-btn, .wpcc-privacy {
    cursor: pointer;
}
<div class="wpcc-container">
    <span class="wpcc-message">This website uses cookies to improve your experience.
      <a class="wpcc-privacy" href="#" rel="noopener" target="_blank">Read more</a>
        </span>
        <div class="wpcc-compliance">
      <a class="wpcc-btn" tabindex="0">ACCEPT</a>
        </div>
</div>

also available at https://codepen.io/mike991/pen/LYyryLX, but I need text and button on same row and button must be visible.

How to achieve it?

button css html
2 Answers

You have used "flex: 1 1 auto;" for ".wpcc-banner .wpcc-message" which makes the text occupy whatever space thats left without the button. Remove that line and add "justify-content: center;" to ".wpcc-container".

user_165721840

If you need text in line with the button, then one of the options:

add for same as .wpcc-btn padding to: span.wpcc-message

        
        .wpcc-banner.wpcc-bottom {
            left: 0;
            right: 0;
            bottom: 0;
        }
        
        .wpcc-banner .wpcc-message {
            display: block;
            flex: 1 1 auto;
            margin-right: 1em;
            max-width: 100%;
        }
        span.wpcc-message {
            text-align: center;
            padding: .4em 0;
        }
        
        .wpcc-color-custom-1621853993.wpcc-container {
            background-color: rgb(34, 34, 34);
            border-color: rgb(230, 179, 179);
            color: rgb(255, 255, 255);
        }
        .wpcc-container {
            border-style: solid;
            border-width: 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: nowrap;
            font-family: inherit;
            font-size: 16px;
            line-height: 1.5em;
            overflow: hidden;
            position: fixed;
            transition: opacity 1s ease;
            z-index: 9999;
        }
        .wpcc-btn {
            display: block;
            font-size: .9em;
            font-weight: 700;
            padding: .4em .8em;
            text-align: center;
            white-space: nowrap;
        }
        .wpcc-btn, .wpcc-privacy {
            cursor: pointer;
        }
<div class="wpcc-container">
        <span class="wpcc-message">This website uses cookies to improve your experience.
            <a class="wpcc-privacy" href="#" rel="noopener" target="_blank">Read more</a>
        </span>
        <div class="wpcc-compliance">
            <a class="wpcc-btn" tabindex="0">ACCEPT</a>
        </div>
</div>

user_164825160
Related