.container { display: flex; } .column { flex: 1; } ul { list-style-type: none; padding: 0; } li { padding: 10px; border-bottom: 1px solid #ccc; } /* Float items in the right column to the right */ .column:nth-child(2) { float: right; } /* Optional: Add styles to make it visually appealing */ .column { border-radius: 5px; } li:hover { background-color: #eaeaea; } </style> <style> body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; margin: 0; padding: 0px; } .match-container { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .match-box { background-color: #fff; border: 1px solid #ccc; padding: 2px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; transition: box-shadow 0.3s ease-in-out; } .match-box:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .text-left, .text-right { width: 100%; } h1 { margin: 0; color: #fff; font-size: 12px; background: #76787b; padding: 2px; } p { color: #999; text-align: left; margin: 0; padding: 5px; } .teams { line-height: 2; font-size: 20px; font-weight: 400; margin-bottom: 10px; color: #555555b3; text-align: center; background: rgb(159 181 183 / 22%); background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #ffffff); } t1 { font-size: 30px; margin-left: 0px; color: #555; margin-right: 25px; font-weight: bold; padding: 5px; } .countdown { font-size: 18px; color: #bb8912; text-align: right; } pp { font-size: 25px; margin-right: 10px; color: #ffffff; padding: 7px 17px; background: #059862; border-radius: 4px; float: right; font-family: monospace; margin-bottom: 10px; } poo { font-size: 12px; margin-left: 0px; float: right; color: #636363; margin-right: 25px; margin-bottom: 10px; } po { font-size: 25px; color: #616161; font-weight: bold; } pp1 { font-size: 14px; margin: 0px; color: #999; padding: 4px; background: #e1e1e14f; line-height: 3; } ppp { color: #ff8f8f; padding: 5px; font-size: 12px; margin-bottom: 10px; } hr { width: 100%; border: none; border-top: 2px solid red; /* Adjust thickness and style as needed */ } k1 { color: #999; margin: 0; padding: 5px; float: right; margin-right: 5px; }