How to move a div when a checkbox is checked in .html/.css

I am making a webpage with .css and .html and have a div "rowcontainer" which I would like to move inside the div "selected" when the checkbox is checked then preferably move back if it is unchecked. Also I am planning to have a lot of these rows so is there I way I can give them separate names so I can refer to them individualy?

Thanks

.selected {
    margin:auto;
    max-width: 800px;
    height: auto;
    min-height: 30px;
    margin-bottom: 1%;
}

.rowcontainer {
    margin: auto;
    width: 80%;
    height: 30px;
}

.name {
    line-height: 30px;
    float: left;
    width: 60%;
    height: 100%;
    padding-left: 15px
}

.ako {
    line-height: 30px;
    text-align: center;
    float: left;
    width: 20%;
    height: 100%;
}

.select {
    line-height: 30px;
    text-align: center;
    float: left;
    width: 20%;
    height: 100%;
}

.checkbox {
    height: 17px;
    width: 17px;
    margin: auto;
    margin-top: 6px;
}

<div class = "selected"></div>
<div class = "rowcontainer">
  <div class = "name"><bt>Name</bt></div>
    <div class = "ako"><bt>Ako</bt></div>
    <div class = "select"><bt>Select</bt>
        <input type = "checkbox" class = "checkbox">
  </div>
</div>