how to position elements one to left and other right one below the other- CSS

user_4021059 0
Viewed 89

I am trying to position the following elements one below the other , but one to the left and other to the right: my code:

here is the fiddle: https://jsfiddle.net/ak9hxfpt/2/

I want to position the test2 to the right of the test1 div, but it should appear below the test1 div What I want to achieve is something like: https://jsfiddle.net/ak9hxfpt/3/

however this works only for one div, if I try float: right for all the divs I have this is what I get which is not working out for me: https://jsfiddle.net/ak9hxfpt/4/

the every "remove link" content should appear below every "some content". any ideas on how this can be achieved

.test2 {
  margin-bottom: 30px;
}

.test1 {
  border: 1px solid #000;
  margin-bottom: 10px;
  width: 93%;
}
<div class="test2">
  remove link
</div>
</div>
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>

css html
3 Answers

just add some margin-left

.test2 {
  margin-bottom: 30px;
  margin-left:80%;
}

.test1 {
  border: 1px solid #000;
  margin-bottom: 10px;
  width: 93%;
}
<div class="test2">
  remove link
</div>

<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>

or

.test2 {
  margin-bottom: 30px;
  width:93%;
  text-align:right;
}

.test1 {
  border: 1px solid #000;
  margin-bottom: 10px;
  width: 93%;
}
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>

user_43989660

I would try nesting your code in a container and use display: flex; with flex-direction: column;

.test2 {
  float: right;
}

.test1 {
  border: 1px solid #000;
  margin-bottom: 10px;
  width: 93%;
}

.container {
  display: flex;
  flex-direction: column;
}
<div class="container">
  <div class="test">
    <div class="test1">
      some content
    </div>
    <div class="test2">
      remove link
    </div>
  </div>
  <div class="test">
    <div class="test1">
      some content
    </div>
    <div class="test2">
      remove link
    </div>
  </div>
  <div class="test">
    <div class="test1">
      some content
    </div>
    <div class="test2">
      remove link
    </div>
  </div>
  <div class="test">
    <div class="test1">
      some content
    </div>
    <div class="test2">
      remove link
    </div>
  </div>
  <div class="test">
    <div class="test1">
      some content
    </div>
    <div class="test2">
      remove link
    </div>
  </div>
</div>

Another option would be to set display: flex; on test right a flex-direction: row; then you can can set test2 to width: 7%; while test still takes up 93%. Finally, you can space them by adding gap Check the snippet below.

.test2 {
  width: 7%;
}

.test1 {
  border: 1px solid #000;
  margin-bottom: 10px;
  width: 93%;
}

.test {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 10px;
}
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>
<div class="test">
  <div class="test1">
    some content
  </div>
  <div class="test2">
    remove link
  </div>
</div>

user_164963570
user_153746510
Related