I have got one html and one css file. There are below.

main {
  flex: 1 1 0%;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.list-lists {
  padding: 1rem;
}

.list-lists h2 {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--grey);
  margin-bottom: 1rem;
}

#lists .single-list {
  display: flex;
  justify-content: space-between;
  background-color: var(--darkest);
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

#lists .single-list .f {
  display: inline
}

.single-list .f .content {
  flex: 1 1 0%;
}

.single-list .f .content .text {
  color: var(--light);
  font-size: 1.125rem;
  width: 100%;
  display: block;
  transition: 0.4s;
}

.single-list .f .content .text:not(:read-only) {
  color: var(--pink);
}

.single-list .f .actions {
  display: flex;
  margin: 0 -0.5rem;
}

.single-list .f .actions button {
  cursor: pointer;
  margin: 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.4s;
}

.single-list .f .actions button:hover {
  opacity: 0.8;
}

.single-list .f .actions button:active {
  opacity: 0.6;
}

.single-list .f .actions .edit {
  background-image: linear-gradient(to right, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.single-list .f .actions .delete {
  color: crimson;
}

<main>
  <section >
    <div id="lists">
      <div >

        <form  method="POST" action="">
          <div >
            <input type="text"  value="Hi" readonly>
          </div>
          <div >
            <button >Edit</button>
            <button >Delete</button>
          </div>
        </form>
      </div>
    </div>
  </section>
</main>

The problem is that input and buttons at the end of a page displayed on separate lines.

image: what I have

And I want them to be on the same line.

image: what I want

Result on the second image achieved by deleting form tag and removing its reference in css file. But I need to preserve it.

CodePudding user response：

Setting inline-block to the elements actions and content would put them in one line:

.single-list .f .actions {
    /* display: flex; */ 
    margin: 0 -0.5rem;
 }

.content, .actions {
    display: inline-block;
 }