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

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 >
  remove link
</div>
</div>
<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>
<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      some content
    </div>
    <div >
      remove link
    </div>
  </div>
  <div >
    <div >
      some content
    </div>
    <div >
      remove link
    </div>
  </div>
  <div >
    <div >
      some content
    </div>
    <div >
      remove link
    </div>
  </div>
  <div >
    <div >
      some content
    </div>
    <div >
      remove link
    </div>
  </div>
  <div >
    <div >
      some content
    </div>
    <div >
      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 >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>
<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>
<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>
<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>
<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>

CodePudding user response：

just add some margin-left

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

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

<div >
  remove link
</div>

<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>
<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>

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

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

<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>
<div >
  <div >
    some content
  </div>
  <div >
    remove link
  </div>
</div>

CodePudding user response：

Just add display: flex; justify-content: flex-end to your test2 class and it will work.enter image description here