JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div class="products">


<div class="wrap">    
    <label for="donor database">
        <input type="checkbox" id="letter" name="letter" value="YES" class="checkbox"/>
        DonorPro Donor Database
    </label>
</div>
<div class="wrap"> 
    <label for="nonprofit websites">
        <input type="checkbox" id="return" name="return" value="YES" class="checkbox"/>    
        DonorPro's Nonprofit Websites
    </label>    
</div>
<div class="wrap"> 
    <label for="peer-to-peer fundraising">
        <input type="checkbox" id="save_destination" name="save_destination" value="YES" class="checkbox"/>
        DonorPro's Peer-to-Peer Fundraising
    </label>
    </div>
    <div class="wrap"> 
    <label for="mobile marketing">
        <input type="checkbox" id="save_destination" name="save_destination" value="YES" class="checkbox"/>
        DonorPro's Mobile Marketing Tools
    </label>
    </div>
</div>

CSS

.products input,.products select{
    float:left;
    font-size:12px;
    padding:4px 2px;
    width:400px;
    margin:2px 0 20px 10px;
    text-align: left;
}
.checkbox  {
    float: left;
}

.wrap {
     overflow: hidden;
}

.wrap .checkbox {
     margin-right: 10px;
     width: auto;   
}