How do you horizontal align image and text inside a checkbox element?

Question

I have an image and some text that both work as a checkbox. However when I try to align them horizontally it does not work with me.

I've tried using dividers but when I do I can't include the text part into a button.

CSS Folder:

.hidden {
  display: none;
}

.registerCheckbox {
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-width: 1px;
    border-color: #ddd;
    border: 1px solid rgb(212, 212, 212);
    box-shadow: 7px 7px 2px -3px rgb(212, 212, 212);
    border-radius: 25px;
    transition: 0.2s;
  }

  .registerCheckbox::before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
  }

  .registerCheckbox img {
    height: 100px;
    width: 100px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
  }

  :checked+.registerCheckbox {
    border-radius: 25px;
    border: 5px solid #5BDEBE;
    transition: 0.2s;
  }

  :checked+.registerCheckbox::before {

    border-color: #ddd;
    border: 1px solid grey;

  }

JS Folder:

       <link rel="stylesheet" type="text/css" href={require('../static/css/planCheckbox.css')} />

           <input type="checkbox" id="google" value={this.state.google} checked={this.state.google} onChange={() => { this.setState({ google: !this.state.google }) }} />
         <label class="registerCheckbox" htmlFor="google-ads"><img alt="Google ads" src={require('../static/img/register/google.png')} /> <br></br>
           <b>{this.props.t('TEST')}</b>:<br />{this.props.t('This doesnt work!')}.</label>

What I get (top) and what I want (bottom)

Any help is highly appreciated!

Answer 1

I left out some HTML attributes that doesn't really make it easy to understand what is happening in this demo-code. I also needed to make a new container around your text elements.

Hopefully this demo gives you a headstart to figure out how you want to build it.

I tried to leave your original styling for what it is. To better understand the changes I placed them inside an extra class called "flex".

.hidden {
  display: none;
}

.registerCheckbox {
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-width: 1px;
    border-color: #ddd;
    border: 1px solid rgb(212, 212, 212);
    box-shadow: 7px 7px 2px -3px rgb(212, 212, 212);
    border-radius: 25px;
    transition: 0.2s;
  }
  
  /* Flexbox solution */
  .flex.registerCheckbox  {
    display: flex;
  }
    
  .flex.registerCheckbox .text-container {
    display: flex;
    flex-direction: column;
    padding: 0 10px 10px;
  }
  
  .registerCheckbox::before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
  }

  .registerCheckbox img {
    height: 100px;
    width: 100px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
  }

  input:checked + .registerCheckbox {
    border-radius: 25px;
    border: 5px solid #5BDEBE;
    transition: 0.2s;
  }

  input:checked + .registerCheckbox::before {
    content: "";
    border-color: #ddd;
    border: 1px solid grey;

  }

<input type="checkbox" id="google-1" class="hidden" />
 <label for="google-1" class="flex registerCheckbox">
 <img alt="Google ads" src="https://placehold.it/400x400" />
  <div class="text-container">
    <strong>Test</strong>
    <span>This doesn't work.</span>
  </div>
 </label>
 
 <input type="checkbox" id="google-2" class="hidden" />
 <label for="google-2" class="flex registerCheckbox">
 <img alt="Google ads" src="https://placehold.it/400x400" />
  <div class="text-container">
    <strong>Test</strong>
    <span>This doesn't work.</span>
  </div>
 </label>

Answer 2

add parent div to your checkbox and label and set display:flex; to that parent class.

here is the updated code:

.checkboxdiv {
  display: flex;
}

<div class="checkboxdiv">
  <input type="checkbox" id="google" value={this.state.google} checked={this.state.google} onChange={()=> { this.setState({ google: !this.state.google }) }} />
  <label class="registerCheckbox" htmlFor="google-ads"><img alt="Google ads" src={require('../static/img/register/google.png')} /> <br></br>
           <b>{this.props.t('TEST')}</b>:<br />{this.props.t('This doesnt work!')}.</label>
</div>

Answer 3

You could use the following code:

Display: flex;

on the parent div. This should put everything next to each other.