CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 1945

adding space to right between 2 divs vertically

I want to arrange div below each other but lower div should be moved to right. so i am expecting output like this

enter image description here

Right now i have made it to work by using below code

<div id="div1" class="checkbox">
                        <label>
                            <input type="checkbox" id="chk1" data-bind="checked: data1" />
                            <span>DIV 1</span>
                        </label>
</div>
<div id="div2" class="checkbox" style="text-align: center;width: 370px">
                        <label>
                            <input type="checkbox" id="chk2" data-bind="checked: data2" />
                  <span>div2</span>
                        </label>
</div>

so basically i reduced width of div2 and aligned text to center but i dont think thats good way to do it. Any other better way?

Upvotes: 0

Views: 62

Answers (2)

MattHamer5
MattHamer5

Reputation: 1491

If there's only going to be two divs that need to be spaced apart; you can use one of the following inside your HTML markup.

  • &nbsp; - Adds a single space
  • &ensp; - Adds 2 spaces
  • &emsp; - Adds 4 spaces

<div id="div1" class="checkbox">
  <label>
    <input type="checkbox" id="chk1" data-bind="checked: data1" />
    <span>DIV 1</span>
  </label>
</div>

<div id="div2" class="checkbox">
  <label>
  &emsp;
    <input type="checkbox" id="chk2" data-bind="checked: data2" />
    <span>DIV 2</span>
  </label>
</div>

Upvotes: 1

Aman Seth
Aman Seth

Reputation: 305

.container {
  display: flex;
  flex-direction: column;
  width: 200px
}

#div1 {
  height: 20px;
  width: 150px;
  border: 1px solid;
}

#div2 {
  height: 20px;
  width: 150px;
  border: 1px solid;
  align-self: flex-end;
}
<div class="container">
<div id="div1" class="checkbox">
                        <label>

                            <span>DIV 1</span>
                        </label>
</div>
<div id="div2" class="checkbox" >
                        <label>

                  <span>div2</span>
                        </label>
</div>
</div>

Upvotes: 0

Related Questions