Button next to my entry always shows below the entry - html

Question

I have a blog I am building with entries. I have a form with hidden variables to submit the entryID and other data to "delete" the post. The button always shows below the entry, instead of beside it.
I have tried using CSS Clear, and putting everything in a single <p> line to see if that helps. I feel like the issue is that there is a form with hidden variables, but I'm not sure how to fix this.
<div id="subformposts">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo $subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo $subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo $subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>
I want to see the button floating to the right of my entry, (or to the left at this point.) If I could have it tucked into the div that would be great.

Answer 1

You can use display: inline-flex on subformposts.
Like this one :
<div id="subformposts" style="display: inline-flex;">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo
$subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo $subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo $subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>
Or you can keep both in two different div and put display:inline-block on both of those div. Like this .
<div id="subformposts" style="display: inline-block;">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
</div>
<div style="display: inline-block;">
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo
$subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo
$subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo
$subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>