How to align components within a html strip

Question

I am trying to create a newsletter subscription strip above the footer and I am having major issues styling it. Basically I require:

1: all the components to be vertically aligned and to be aligned with each other

2: The sign up field to be on the right hand side of the strip

3: My client is away but he explicitly says: copy: ‘ Join Balance and get 20% off your first order’ Use Balance Coffee GIF here to add next to text. Not sure where best to put it but as a bonus if someone has any ideas where I should put this gif, will be much appreciated.

Here is the strip:

Here is the HTML and CSS:

<!-- newsletter section -->

<div class="newsletter_section">

<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>

<div class="newsletter_gif_section">
<img src="./wp-content/uploads/2020/07/test-image.gif" alt="Balance Newsletter" style="height:100px;">
</div>

<div class="newsletter_input_section">
<div class="klaviyo-form-X95HYK"></div> 
</div>
    
</div>

.newsletter_section{
    width:100% !important;
    background: #455657;
      overflow:hidden;
      padding-top:25px;
    padding-bottom:25px
}

.newsletter_text_section {
  width: 40%;
  float: left;
    font-size:24px;
    padding-left:30px;
    height: 10vh;
  line-height: 10vh;
}

.newsletter_text_section p {
    font-size:24px !important;
}

.newsletter_gif_section {
  width: 20%;
  float: left;
        height: 10vh;
  line-height: 10vh;
}

.newsletter_input_section {
  width: 40%;
  float: left;
        height: 10vh;
  line-height: 10vh;
}

There is no input inside `.newsletter_input_section`. You should add [minimal reproducible code](https://stackoverflow.com/help/minimal-reproducible-example), so that anyone can understand your problem better. — DecPK, Jul 15 '21 at 05:38
It's link with Klaviyo. I think we just need to move the div with class `"klaviyo-form-X95HYK"` — BruceyBandit, Jul 15 '21 at 05:50
add `display: flex; justify-content: flex-end;` on `newsletter_input_section` — DecPK, Jul 15 '21 at 05:55
and to align all element vertically center use `display:flex; align-items: center;` on `.newsletter_section` — DecPK, Jul 15 '21 at 05:56
@decpk Sweet, that moved the input field and button to the right hand side — BruceyBandit, Jul 15 '21 at 05:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/234886/discussion-between-decpk-and-bruceybandit). — DecPK, Jul 15 '21 at 05:57

score 1 · Accepted Answer · answered Jul 15 '21 at 05:59

1

Just add following style on .newsletter_section

display:flex;
align-items: center;

and follwing style on .newsletter_input_section

display: flex;
justify-content: flex-end;

answered Jul 15 '21 at 05:59

DecPK

24,537
6
26
42

score 0 · Answer 2 · answered Jul 15 '21 at 06:06

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
 <style type="text/css" media="screen">
        
.newsletter_section{
    width:100% !important;
    background: #455657;
      overflow:hidden;
      padding-top:25px;
    padding-bottom:25px
}

.newsletter_text_section {
  width: 40%; color: #fff;
  float: left;
    font-size:24px;
    padding-left:30px;
      line-height: 10vh;
}

.newsletter_text_section p {
    font-size:24px !important;
}

.newsletter_gif_section {
  width: 20%;
  float: left; color: #fff;
        height: 10vh;
  line-height: 10vh; 
}

.newsletter_input_section {
  width: 38%;  
  float: left;  color: #fff;
 
    
  line-height: 20vh;
}
    </style>
</head>
<body>
 
<div class="newsletter_section">

<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>

<div class="newsletter_gif_section">
<img src="https://tpc.googlesyndication.com/simgad/3193497924224721006" alt="Balance Newsletter" style="height:100px;">
</div>

<div class="newsletter_input_section">
<div class="klaviyo-form-X95HYK"> <input type="text" /> <button type="">Submit</button> </div> 
</div>
    
</div>

</body>
</html>

How to align components within a html strip

2 Answers2