how to make less space between all button using css

Question

what i am trying to do is when i click on check box then div is display horizontal.

but in my below code when i click on checkbox then div is showing div is vertically.

but i try to make when i click on checkbox then div is show horizontally. how can we do that using CSS

is there any help.

$(document).ready(function() { 
                $('input[type="checkbox"]').click(function() { 
                    var inputValue = $(this).attr("value"); 
                    $("." + inputValue).toggle(); 
                }); 
            }); 

.selectt { 
            color: #fff; 
            padding: 30px; 
            display: none; 
            margin-top: 30px; 
            width:20%; 
           
        } 
        
        label { 
            margin-right: 15px; 
        } 

       .d-flex-wrapper {
           display: flex;
       }
       .d-flex-wrapper > div{
           margin-right:5px;
       }
       .d-flex-wrapper > div:last-chid{
           margin-right:30px;
       }
       
       .button {

  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */

<script src= 
"https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="C"> C</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Cplus"> C++</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Python"> Python</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Java"> Java</label> 
        </div> 
     <div class="d-flex-wrapper">  <!-- Added New div start here -->
        <div class="C selectt"> 
       <button class="button button2">Blue</button>
        </div> 
        
        <div class="Cplus selectt"> 
       <button class="button button2">Blue</button>
       </div> 
        <div class="Python selectt"> 
       <button class="button button2">Blue</button></div> 
        <div class="Java selectt"> 
        <button class="button button2">Blue</button></div>   <!-- Added New div end's here -->
    </div>

Answer 1

You Can use- Display Flex

$(document).ready(function() { 
                $('input[type="checkbox"]').click(function() { 
                    var inputValue = $(this).attr("value"); 
                    $("." + inputValue).toggle(); 
                }); 
            }); 

    .selectt { 
            color: #fff; 
            padding: 30px; 
            display: none; 
            margin-top: 30px; 
            width:20%; 
            background: green 
        } 
        
        label { 
            margin-right: 20px; 
        } 

       .d-flex-wrapper {
           display: flex;
       }
       .d-flex-wrapper > div{
           margin-right:20px;
       }
       .d-flex-wrapper > div:last-chid{
           margin-right:0px;
       }

<script src= 
"https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<div> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="C"> C</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Cplus"> C++</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Python"> Python</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Java"> Java</label> 
        </div> 
     <div class="d-flex-wrapper">  <!-- Added New div start here -->
        <div class="C selectt"> 
        <strong>C</strong> 
        is a procedural programming language
        </div> 
        
        <div class="Cplus selectt"> 
        <strong>C++</strong> 
        is a general purpose programming language</div> 
        <div class="Python selectt"> 
        <strong>Python</strong> 
        is a widely used general-purpose, high level 
        programming language.</div> 
        <div class="Java selectt"> 
        <strong>Java</strong> 
        is a most popular programming language 
        for many years.</div>   <!-- Added New div end's here -->
    </div>

I Hope it's Help You :) Thanks

Answer 2

wrap the green boxes inside a div with the css property and value: display: flex;

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle();
  });
});

.selectt {
  color: #fff;
  padding: 30px;
  display: none;
  margin-top: 30px;
  width: 20%;
  background: green
}

label {
  margin-right: 20px;
}


/* Added for the wrapper */

.flex-wrap {
  display: flex;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
  <label> 
    <input type="checkbox" name="colorCheckbox" value="C"> C</label>
  <label> 
    <input type="checkbox" name="colorCheckbox" value="Cplus"> C++</label>
  <label> 
    <input type="checkbox" name="colorCheckbox" value="Python"> Python</label>
  <label> 
    <input type="checkbox" name="colorCheckbox" value="Java"> Java</label>
</div>

<div class="flex-wrap"> <!-- Added opening div -->

  <div class="C selectt">
    <strong>C</strong> is a procedural programming language
  </div>

  <div class="Cplus selectt">
    <strong>C++</strong> is a general purpose programming language</div>
  <div class="Python selectt">
    <strong>Python</strong> is a widely used general-purpose, high level programming language.</div>
  <div class="Java selectt">
    <strong>Java</strong> is a most popular programming language for many years.</div>

</div>  <!-- Added closing div -->